zoukankan      html  css  js  c++  java
  • 图片在线裁剪和图片上传总结

    上周需要做一个图片上传并且将上传的图片在线可以裁剪展示,觉得这个功能很有用,但是找参考资料的时候却并不是很多,因此来将我用到的总结总结,也让有需要的博友们直接借鉴。

    首先环境介绍:

    1、asp.net mvc网站,用到的前端插件是JCrop和Bootstrap-fileinput,在后端用框架自带的一些类库进行处理即可。

      JCrop插件是用来裁剪图片的,页面上裁剪就是保存裁剪的位置信息,然后将位置信息转给后台在后台进行实际图片裁剪功能。

      插件地址:http://code.ciaoca.com/jquery/jcrop/demo/

      Bootstrap-fileinput插件是Bootstrap下的文件上传的插件,功能强大,我将依靠这个完成文件的上传,当然也能够使用其他的文件上传工具。

      插件地址:http://plugins.krajee.com/file-input

      文件上传后页面上展示的图片是以Data URI Scheme方式进行展示的。

      Data URI Scheme知识点:https://blog.csdn.net/aoshilang2249/article/details/51009947

    2、asp.net core mvc网站,前端插件不变,但是在后端不能够使用自带类库了,core下面的图片处理相关的类库还没有完全移植过来,只能够借用第三方类库SixLabors.ImageSharp

    快速浏览

    @{
        ViewBag.Title = "文件上传";
    }
    
    <link href="@Url.Content("~/Content/Jcrop/jquery.Jcrop.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/bootstrap-fileinput/fileinput.css")" rel="stylesheet" />
    
    <br />
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">头像</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">图片上传</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6" style=" 300px;">
                            <img id="cut-img" class="thumbnail" style=" 300px;height:300px;" src="~/Content/defaultAvatar.jpg"><br />
                        </div>
                        <div class="col-md-5">
                            <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /><br />
                            <h4>图片说明:</h4>
                            <p>1、图片格式需要jpg、gif、png为后缀名.</p>
                            <p>2、图片可以在线裁剪大小,以裁剪后为最终结果.</p>
                            <p>3、图片上传完毕即可关闭窗口.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    @section scripts{
        <script src="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.js")"></script>
        <script src="@Url.Content("~/Scripts/bootstrap-fileinput/fileinput.js")"></script>
        <script src="@Url.Content("~/Scripts/bootstrap-fileinput/zh.js")"></script>
        <script type="text/javascript">
    
            //http://code.ciaoca.com/jquery/jcrop/
            //http://code.ciaoca.com/jquery/jcrop/demo/animation
            //http://plugins.krajee.com/file-input
            //http://plugins.krajee.com/file-advanced-usage-demo#advanced-example-5
    
            var tailorInfo = "";
    
            //初始化fileinput
            function FileInput() {
                var oFile = new Object();
    
                oFile.Init = function (ctrlName, uploadUrl) {
                    var control = $('#' + ctrlName);
                    //初始化上传控件的样式
                    control.fileinput({
                        language: 'zh', //设置语言
                        browseLabel: '选择',
                        browseIcon: "<i class="glyphicon glyphicon-picture"></i> ",
                        browseClass: "btn btn-primary", //按钮样式
                        uploadUrl: uploadUrl, //上传的地址
                        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        showCaption: false,//是否显示标题
                        showPreview: false,//隐藏预览
                        dropZoneEnabled: false,//是否显示拖拽区域
                        uploadAsync: true,//采用异步
                        autoReplace: true,
                        //minImageWidth: 50,
                        //minImageHeight: 50,
                        //maxImageWidth: 1000,
                        //maxImageHeight: 1000,
                        //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
                        //minFileCount: 0,
                        maxFileCount: 1, //表示允许同时上传的最大文件个数
                        enctype: 'multipart/form-data',
                        validateInitialCount: true,
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
                        uploadExtraData: function () {
                            return { "tailorInfo": tailorInfo }
                        }
                    });
                }
    
                return oFile;
            };
    
            function PageInit() {
                var jcorp = null;
                var _this = this;
                var fileInput = new FileInput();
                fileInput.Init("txt_file", "@Url.Action("UpLoadFile")");
                var input = $('#txt_file');
    
                //图片上传完成后
                input.on("fileuploaded", function (event, data, previewId, index) {
                    if (data.response.success) {
                        jcorp.destroy();
    
                        $('#cut-img').attr('src', data.response.newImage);//Data URI Scheme形式
                        //$('#cut-img').attr('src', data.response.newImage + "?t=" + Math.random());//加尾巴解决缓存问题
                    }
                    alert(data.response.message);
                });
    
                //选择图片后触发
                input.on('change', function (event, data, previewId, index) {
                    var img = $('#cut-img');
                    if (input[0].files && input[0].files[0]) {
                        var reader = new FileReader();
                        reader.readAsDataURL(input[0].files[0]);
                        reader.onload = function (e) {
                            img.removeAttr('src');
                            img.attr('src', e.target.result);
                            img.Jcrop({
                                setSelect: [0, 0, 260, 290],
                                handleSize: 10,
                                aspectRatio: 1,//选框宽高比
                                bgFade: false,
                                bgColor: 'black',
                                bgOpacity: 0.3,
                                onSelect: updateCords
                            }, function () {
                                jcorp = this;
                            });
                        };
                        if (jcorp != undefined) {
                            jcorp.destroy();
                        }
                    }
                    function updateCords(obj) {
                        tailorInfo = JSON.stringify({ "PictureWidth": $('.jcrop-holder').css('width'), "PictureHeight": $('.jcrop-holder').css('height'), "CoordinateX": obj.x, "CoordinateY": obj.y, "CoordinateWidth": obj.w, "CoordinateHeight": obj.h });
                        console.log(tailorInfo);
                    }
                });
    
                //上传出现错误
                input.on('fileuploaderror', function (event, data, msg) {
                    alert(msg);
    
                    //jcorp.destroy();
                    //$('#cut-img').attr('src', '/Content/defaultAvatar.jpg');
                    return false;
                });
    
                //移除图片
                input.on('fileclear', function (event) {
                    console.log("fileclear");
    
                    jcorp.destroy();
                    $('#cut-img').attr('src', '/Content/defaultAvatar.jpg');
                });
            };
    
            $(function () {
                PageInit();
            });
        </script>
    }
    前端页面代码
        public class FileInputController : Controller
        {
            [HttpGet]
            public ActionResult UpLoadFile()
            {
                return View();
            }
    
            [HttpPost]
            public ActionResult UpLoadFile(string tailorInfo)
            {
                var success = false;
                var message = string.Empty;
                var newImage = string.Empty;
                try
                {
                    var tailorInfoEntity = JsonConvert.DeserializeObject<TailorInfo>(tailorInfo);
                    tailorInfoEntity.PictureWidth = tailorInfoEntity.PictureWidth.Replace("px", "");
                    tailorInfoEntity.PictureHeight = tailorInfoEntity.PictureHeight.Replace("px", "");
    
                    var file = HttpContext.Request.Files[0];
                    if (file != null && file.ContentLength != 0)
                    {
                        newImage = ImageHelper.TailorImage(file.InputStream, tailorInfoEntity);
                        success = true;
                        message = "保存成功";
                    }
                }
                catch (Exception ex)
                {
                    message = "保存失败" + ex.Message;
                }
    
                return Json(new { success = success, message = message, newImage = newImage });
            }
        }
    后端控制器代码
        /// <summary>
        /// 前端裁剪信息及前端图片展示规格
        /// </summary>
        public class TailorInfo
        {
            public string PictureWidth { get; set; }
            public string PictureHeight { get; set; }
            public int CoordinateX { get; set; }
            public int CoordinateY { get; set; }
            public int CoordinateWidth { get; set; }
            public int CoordinateHeight { get; set; }
        }
    裁剪信息类
        /// <summary>
        /// 图片处理
        /// </summary>
        public static class ImageHelper
        {
            /// <summary>
            /// 图片按照实际比例放大
            /// </summary>
            /// <param name="content"></param>
            /// <param name="tailorInfo"></param>
            /// <returns></returns>
            public static string TailorImage(Stream content, TailorInfo tailorInfo)
            {
                var scaleWidth = Convert.ToInt16(tailorInfo.PictureWidth);
                var scaleHeight = Convert.ToInt16(tailorInfo.PictureHeight);
    
                Bitmap sourceBitmap = new Bitmap(content);
                double scaleWidthPercent = Convert.ToDouble(sourceBitmap.Width) / scaleWidth;
                double scaleHeightPercent = Convert.ToDouble(sourceBitmap.Height) / scaleHeight;
    
                double realX = scaleWidthPercent * tailorInfo.CoordinateX;
                double realY = scaleHeightPercent * tailorInfo.CoordinateY;
                double realWidth = scaleWidthPercent * tailorInfo.CoordinateWidth;
                double realHeight = scaleHeightPercent * tailorInfo.CoordinateHeight;
    
                return CropImage(content, (int)realX, (int)realY, (int)realWidth, (int)realHeight);
            }
    
            /// <summary>
            /// 生成新图片
            /// </summary>
            /// <param name="content"></param>
            /// <param name="x"></param>
            /// <param name="y"></param>
            /// <param name="cropWidth"></param>
            /// <param name="cropHeight"></param>
            /// <returns></returns>
            public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight)
            {
                using (MemoryStream stream = new MemoryStream(content))
                {
                    return CropImage(stream, x, y, cropWidth, cropHeight);
                }
            }
    
            /// <summary>
            /// 生成新图片
            /// </summary>
            /// <param name="content"></param>
            /// <param name="x"></param>
            /// <param name="y"></param>
            /// <param name="cropWidth"></param>
            /// <param name="cropHeight"></param>
            /// <returns></returns>
            public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight)
            {
                using (Bitmap sourceBitmap = new Bitmap(content))
                {
                    Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height);
                    Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight);
                    using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight))
                    {
                        newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
                        using (Graphics g = Graphics.FromImage(newBitMap))
                        {
                            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                            g.SmoothingMode = SmoothingMode.HighQuality;
                            g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                            g.CompositingQuality = CompositingQuality.HighQuality;
                            g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel);
                            return BitmapToBytes(newBitMap);
                        }
                    }
                }
            }
    
            /// <summary>
            /// 图片转到byte数组
            /// </summary>
            /// <param name="source"></param>
            /// <returns></returns>
            public static string BitmapToBytes(Bitmap source)
            {
                ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4];
                EncoderParameters parameters = new EncoderParameters(1);
                parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
                using (MemoryStream tmpStream = new MemoryStream())
                {
                    source.Save(tmpStream, codec, parameters);
                    byte[] data = new byte[tmpStream.Length];
                    tmpStream.Seek(0, SeekOrigin.Begin);
                    tmpStream.Read(data, 0, (int)tmpStream.Length);
                    return SaveImageToLocal(data);
                }
            }
    
            /// <summary>
            /// 存储图片到本地文件系统
            /// </summary>
            /// <param name="binary"></param>
            public static string SaveImageToLocal(byte[] binary)
            {
                //根据用户信息生成图片名 todo
    
                var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Contentavatar.png");
                File.WriteAllBytes(path, binary);
                return "data:images/png;base64," + Convert.ToBase64String(binary);//Data URI Scheme形式
                //return @"/Content/avatar.png";//Url形式
            }
        }
    图片辅助类

     git地址:https://gitee.com/530521314/TailorImage.git

    步骤:

    一、引用前端插件

      加入JCrop插件,在官网下载或是git上下载均可,引用这两个文件即可,注意引用地址正确哈。

    <link href="@Url.Content("~/Content/Jcrop/jquery.Jcrop.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/Jcrop/jquery.Jcrop.js")"></script>

      加入Bootstrap插件,同样下载或是git上下载,不建议通过nuget或是bower下载,会下载一大堆的东西,很多用不到的。引用如下文件。

    <link href="@Url.Content("~/Content/bootstrap-fileinput/fileinput.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/bootstrap-fileinput/fileinput.js")"></script>
    <script src="@Url.Content("~/Scripts/bootstrap-fileinput/zh.js")"></script>

      我是直接在页面上引用的并没有将其移动到模板上出于一些因素,暂时可以不讨论这里,页面引用结构:

    二、前端文件上传页面设计

      加入文件上传元素,一行代码即可,没错就一行:

    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /><br />

      加入文件上传相关的js代码:

            //初始化fileinput
            function FileInput() {
                var oFile = new Object();
    
                oFile.Init = function (ctrlName, uploadUrl) {
                    var control = $('#' + ctrlName);
                    //初始化上传控件的样式
                    control.fileinput({
                        language: 'zh', //设置语言
                        browseLabel: '选择',
                        browseIcon: "<i class="glyphicon glyphicon-picture"></i> ",
                        browseClass: "btn btn-primary", //按钮样式
                        uploadUrl: uploadUrl, //上传的地址
                        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                        showUpload: true, //是否显示上传按钮
                        showCaption: false,//是否显示标题
                        showPreview: false,//隐藏预览
                        dropZoneEnabled: false,//是否显示拖拽区域
                        uploadAsync: true,//采用异步
                        autoReplace: true,
                        //minImageWidth: 50,
                        //minImageHeight: 50,
                        //maxImageWidth: 1000,
                        //maxImageHeight: 1000,
                        //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
                        //minFileCount: 0,
                        maxFileCount: 1, //表示允许同时上传的最大文件个数
                        enctype: 'multipart/form-data',
                        validateInitialCount: true,
                        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
                        uploadExtraData: function () {
                            return { "tailorInfo": tailorInfo }
                        }
                    });
                }
    
                return oFile;
            };

      然后实例化一个fileinput

     var fileInput = new FileInput();
     fileInput.Init("txt_file", "@Url.Action("UpLoadFile")");

      至此文件上传前端页面已经OK了,接下来加入图片裁剪功能。

    三、前端图片裁剪页面设计

      裁剪的话不能够在文件上传的框中进行直接裁剪,而是通过一个图片标签进行裁剪,因此加入一个图片标签

    <img id="cut-img" class="thumbnail" style=" 300px;height:300px;" src="~/Content/defaultAvatar.jpg"><br />

      裁剪的js代码

     var input = $('#txt_file');
    //选择图片后触发
     input.on('change', function (event, data, previewId, index) {
                    var img = $('#cut-img');
                    if (input[0].files && input[0].files[0]) {
                        var reader = new FileReader();
                        reader.readAsDataURL(input[0].files[0]);
                        reader.onload = function (e) {
                            img.removeAttr('src');
                            img.attr('src', e.target.result);
                   //关键在这里 img.Jcrop({ setSelect: [
    0, 0, 260, 290], handleSize: 10, aspectRatio: 1,//选框宽高比 bgFade: false, bgColor: 'black', bgOpacity: 0.3, onSelect: updateCords }, function () { jcorp = this; }); }; if (jcorp != undefined) { jcorp.destroy(); } } function updateCords(obj) { tailorInfo = JSON.stringify({ "PictureWidth": $('.jcrop-holder').css('width'), "PictureHeight": $('.jcrop-holder').css('height'), "CoordinateX": obj.x, "CoordinateY": obj.y, "CoordinateWidth": obj.w, "CoordinateHeight": obj.h }); console.log(tailorInfo); } });

      至此前端页面文件上传和裁剪可以直接使用了。

    四、后端文件上传和裁剪设计

      将裁剪信息传递到后端,前端可以使用到Bootstrap-fileinput的一个属性uploadExtraData,可以传递除文件外的一些信息过来。当然如果看了Bootstrap-fileinput,其实是有两种模式,模式一是直接表单提交,额外属性直接用相关字段即可保存提交,我用的是模式二,异步上传,额外的信息只能通过属性uploadExtraData来保存提交。

      获得上传过来的图片信息,通过图片辅助类的处理得到图片的的地址,这个是用的DataURI Scheme协议,可以直接在图片上展示图片,而不需要用相对/绝对路径的形式,某宝好像就是这样。这样一来,小图片可以直接转换成Base64的形式保存在数据库,而不需要依赖本地的文件系统了,不错额。

            [HttpPost]
            public ActionResult UpLoadFile(string tailorInfo)
            {
                var success = false;
                var message = string.Empty;
                var newImage = string.Empty;
                try
                {
                    var tailorInfoEntity = JsonConvert.DeserializeObject<TailorInfo>(tailorInfo);
                    tailorInfoEntity.PictureWidth = tailorInfoEntity.PictureWidth.Replace("px", "");
                    tailorInfoEntity.PictureHeight = tailorInfoEntity.PictureHeight.Replace("px", "");
    
                    var file = HttpContext.Request.Files[0];
                    if (file != null && file.ContentLength != 0)
                    {
                        newImage = ImageHelper.TailorImage(file.InputStream, tailorInfoEntity);
                        success = true;
                        message = "保存成功";
                    }
                }
                catch (Exception ex)
                {
                    message = "保存失败" + ex.Message;
                }
    
                return Json(new { success = success, message = message, newImage = newImage });
            }

       图片辅助类

        /// <summary>
        /// 图片处理
        /// </summary>
        public static class ImageHelper
        {
            /// <summary>
            /// 图片按照实际比例放大
            /// </summary>
            /// <param name="content"></param>
            /// <param name="tailorInfo"></param>
            /// <returns></returns>
            public static string TailorImage(Stream content, TailorInfo tailorInfo)
            {
                var scaleWidth = Convert.ToInt16(tailorInfo.PictureWidth);
                var scaleHeight = Convert.ToInt16(tailorInfo.PictureHeight);
    
                Bitmap sourceBitmap = new Bitmap(content);
                double scaleWidthPercent = Convert.ToDouble(sourceBitmap.Width) / scaleWidth;
                double scaleHeightPercent = Convert.ToDouble(sourceBitmap.Height) / scaleHeight;
    
                double realX = scaleWidthPercent * tailorInfo.CoordinateX;
                double realY = scaleHeightPercent * tailorInfo.CoordinateY;
                double realWidth = scaleWidthPercent * tailorInfo.CoordinateWidth;
                double realHeight = scaleHeightPercent * tailorInfo.CoordinateHeight;
    
                return CropImage(content, (int)realX, (int)realY, (int)realWidth, (int)realHeight);
            }
    
            /// <summary>
            /// 生成新图片
            /// </summary>
            /// <param name="content"></param>
            /// <param name="x"></param>
            /// <param name="y"></param>
            /// <param name="cropWidth"></param>
            /// <param name="cropHeight"></param>
            /// <returns></returns>
            public static string CropImage(byte[] content, int x, int y, int cropWidth, int cropHeight)
            {
                using (MemoryStream stream = new MemoryStream(content))
                {
                    return CropImage(stream, x, y, cropWidth, cropHeight);
                }
            }
    
            /// <summary>
            /// 生成新图片
            /// </summary>
            /// <param name="content"></param>
            /// <param name="x"></param>
            /// <param name="y"></param>
            /// <param name="cropWidth"></param>
            /// <param name="cropHeight"></param>
            /// <returns></returns>
            public static string CropImage(Stream content, int x, int y, int cropWidth, int cropHeight)
            {
                using (Bitmap sourceBitmap = new Bitmap(content))
                {
                    Bitmap bitSource = new Bitmap(sourceBitmap, sourceBitmap.Width, sourceBitmap.Height);
                    Rectangle cropRect = new Rectangle(x, y, cropWidth, cropHeight);
                    using (Bitmap newBitMap = new Bitmap(cropWidth, cropHeight))
                    {
                        newBitMap.SetResolution(sourceBitmap.HorizontalResolution, sourceBitmap.VerticalResolution);
                        using (Graphics g = Graphics.FromImage(newBitMap))
                        {
                            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
                            g.SmoothingMode = SmoothingMode.HighQuality;
                            g.PixelOffsetMode = PixelOffsetMode.HighQuality;
                            g.CompositingQuality = CompositingQuality.HighQuality;
                            g.DrawImage(bitSource, new Rectangle(0, 0, newBitMap.Width, newBitMap.Height), cropRect, GraphicsUnit.Pixel);
                            return BitmapToBytes(newBitMap);
                        }
                    }
                }
            }
    
            /// <summary>
            /// 图片转到byte数组
            /// </summary>
            /// <param name="source"></param>
            /// <returns></returns>
            public static string BitmapToBytes(Bitmap source)
            {
                ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders()[4];
                EncoderParameters parameters = new EncoderParameters(1);
                parameters.Param[0] = new EncoderParameter(Encoder.Quality, 100L);
                using (MemoryStream tmpStream = new MemoryStream())
                {
                    source.Save(tmpStream, codec, parameters);
                    byte[] data = new byte[tmpStream.Length];
                    tmpStream.Seek(0, SeekOrigin.Begin);
                    tmpStream.Read(data, 0, (int)tmpStream.Length);
                    return SaveImageToLocal(data);
                }
            }
    
            /// <summary>
            /// 存储图片到本地文件系统
            /// </summary>
            /// <param name="binary"></param>
            public static string SaveImageToLocal(byte[] binary)
            {
                //根据用户信息生成图片名 todo
    
                var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Contentavatar.png");
                File.WriteAllBytes(path, binary);
                return "data:images/png;base64," + Convert.ToBase64String(binary);//Data URI Scheme形式
                //return @"/Content/avatar.png";//Url形式
            }
        }

      最后这一步可以控制你需要的形式,是要使用路径形式还是Data URI Scheme形式。

      第一个方法将图片根据获得的位置信息,进行比例缩放,然后一系列处理得到新图片。再将图片返回给前端展示。

      裁剪信息的类我是这样设计的,但是里面的内容可以全部自定义,是由前端传递过来的信息决定的,应该属于ViewModel这一类的。

        /// <summary>
        /// 前端裁剪信息及前端图片展示规格
        /// </summary>
        public class TailorInfo
        {
            public string PictureWidth { get; set; }
            public string PictureHeight { get; set; }
            public int CoordinateX { get; set; }
            public int CoordinateY { get; set; }
            public int CoordinateWidth { get; set; }
            public int CoordinateHeight { get; set; }
        }

    五、成果展示

     

      至此图片的在线裁剪搞定了。

    六、 asp.net core下的后端设计

      由于core并还没有将图片相关的类库移植到core下,但是社区上有大神们已经完成了core下的图片处理的类库,我使用的是SixLabors.ImageSharp

      地址:https://www.nuget.org/packages/SixLabors.ImageSharp其中介绍了怎么样安装的方法,不再陈述。

      在asp.net core下,我只实现了一个图片缩放的代码,如有更多需要,可以联系我,我将尝试尝试。

      前端页面无需做改动,后端代码我们需要改变了,需要用到ImageSharp中的一些方法和属性。

      asp.net core取文件的方式变了。

    var file = HttpContext.Request.Form.Files["txt_file"];
    pictureUrl = "data:images/png;base64," + ImageHelper.ImageCompress(file.OpenReadStream());//图片缩放到一定规格

      在图片辅助类中,通过ImageSharp进行处理即可将图片缩放,当然也可以裁剪,但是我没有去设计了:

    public static string ImageCompress(Stream content)
            {
                var imageString = string.Empty;
                using (Image<Rgba32> image = Image.Load(content))
                {
                    image.Mutate(x => x
                         .Resize(image.Width / 5, image.Height / 5)
                         .Grayscale());
    
                    imageString = image.ToBase64String(ImageFormats.Bmp);
                }
                return imageString;
            }

    在此,感谢几位博友的文章:

        @梦游的龙猫 https://www.cnblogs.com/wuxinzhe/p/6198506.html 

             https://yq.aliyun.com/ziliao/1140

    2018-3-31,望技术有成后能回来看见自己的脚步
  • 相关阅读:
    第02组 Alpha冲刺(2/6)
    第02组 Alpha冲刺(1/6)
    第02组 团队Git现场编程实战
    第02组 团队项目-需求分析报告
    团队项目-选题报告
    第二次结对编程作业
    第一次结对编程作业
    第2组 团队展示(组长)
    Exchange 2013 中的 OAB (脱机通讯簿)以及如何管理
    vmware esxi 查看网卡、Raid卡驱动
  • 原文地址:https://www.cnblogs.com/CKExp/p/8681263.html
Copyright © 2011-2022 走看看