图片在线裁剪和图片上传总结-白红宇的个人博客

图片在线裁剪和图片上传总结

发布日期：2021-05-08 23:17:42 浏览次数：18 分类：博客文章

本文共 16792 字，大约阅读时间需要 55 分钟。

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

首先环境介绍：

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

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

　　插件地址：

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

　　插件地址：

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

　　Data URI Scheme知识点：

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

快速浏览

@{    ViewBag.Title = "文件上传";}
     
     
         
              
                   
                        
                         
         图片上传
            
        
            
                        
                             
           
           
           
 
          
                    
           
           
           
 
           图片说明：
 
           1、图片格式需要jpg、gif、png为后缀名.
 
           2、图片可以在线裁剪大小,以裁剪后为最终结果.
 
           3、图片上传完毕即可关闭窗口.
 
          
                
         
            
        
        
       
    
      
     
@section scripts{                }

前端页面代码

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);                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 });        }    }

后端控制器代码

///     /// 前端裁剪信息及前端图片展示规格    /// 
    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; }    }

裁剪信息类

///     /// 图片处理    /// 
    public static class ImageHelper    {        ///         /// 图片按照实际比例放大        /// 
        ///         ///         /// 
             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);        }        ///         /// 生成新图片        /// 
        ///         ///         ///         ///         ///         /// 
             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);            }        }        ///         /// 生成新图片        /// 
        ///         ///         ///         ///         ///         /// 
             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);                    }                }            }        }        ///         /// 图片转到byte数组        /// 
        ///         /// 
             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);            }        }        ///         /// 存储图片到本地文件系统        /// 
        ///         public static string SaveImageToLocal(byte[] binary)        {            //根据用户信息生成图片名 todo            var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Content\avatar.png");            File.WriteAllBytes(path, binary);            return "data:images/png;base64," + Convert.ToBase64String(binary);//Data URI Scheme形式            //return @"/Content/avatar.png";//Url形式        }    }

图片辅助类

git地址：

步骤：

一、引用前端插件

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

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

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

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

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

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

//初始化fileinput        function FileInput() {            var oFile = new Object();            oFile.Init = function (ctrlName, uploadUrl) {                var control = $('#' + ctrlName);                //初始化上传控件的样式                control.fileinput({                    language: 'zh', //设置语言                    browseLabel: '选择',                    browseIcon: " ",                    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: "",                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",                    uploadExtraData: function () {                        return { "tailorInfo": tailorInfo }                    }                });            }            return oFile;        };

　　然后实例化一个fileinput

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

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

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

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

　　裁剪的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);                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 });        }

　　图片辅助类

///     /// 图片处理    /// 
    public static class ImageHelper    {        ///         /// 图片按照实际比例放大        /// 
        ///         ///         /// 
            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);        }        ///         /// 生成新图片        /// 
        ///         ///         ///         ///         ///         /// 
            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);            }        }        ///         /// 生成新图片        /// 
        ///         ///         ///         ///         ///         /// 
            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);                    }                }            }        }        ///         /// 图片转到byte数组        /// 
        ///         /// 
            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);            }        }        ///         /// 存储图片到本地文件系统        /// 
        ///         public static string SaveImageToLocal(byte[] binary)        {            //根据用户信息生成图片名 todo            var path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"Content\avatar.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这一类的。

///     /// 前端裁剪信息及前端图片展示规格    /// 
    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

　　地址：其中介绍了怎么样安装的方法，不再陈述。

　　在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
    
      image = Image.Load(content))            {                image.Mutate(x => x                     .Resize(image.Width / 5, image.Height / 5)                     .Grayscale());                imageString = image.ToBase64String(ImageFormats.Bmp);            }            return imageString;        }

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

2018-3-31,望技术有成后能回来看见自己的脚步

上一篇：利用Bootstrap Paginator插件和KnockoutJS完成分页功能

下一篇：.Net Core和Jexus配置HTTPS服务

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章