首页 > 代码库 > 图片剪切之Croppic插件
图片剪切之Croppic插件
前几天做图片上传时需要进行图片的剪切和缩放，上网查找时找到了这个插件。样式很好看，功能也很OK。但是网上都是php进行后台处理图片的例子，然后只好慢慢琢磨C#的处理。插件地址是：http://www.croppic.net/;
首先下载好插件，放入程序文件中。新建页面，引入croppic.js,croppic.min.js,croppic.css文件，同时不要忘记引入jquery文件，我用的是1.8.2的版本。之前没引入1.8.2的版本，而是使用的下载下来的demo中的https://code.jquery.com/jquery-1.10.2.min.js这个版本，不知道是不是1.10.2版本的问题，点击上传按钮没有反应，打开F12总是提示我找不到$，也就是没有jquery的错误，后来引入了jquery-1.8.2.min.js文件以后果然可以使用了。
一、页面
页面代码没什么好说的，demo里都有，不过还是贴一下javascript的部分吧。
1 <script src=http://www.mamicode.com/"https://code.jquery.com/jquery-1.10.2.min.js"></script> 2 <script> 3 var croppicHeaderOptions = { 4 uploadUrl: "Ashx/Upload.ashx", 5 cropData: { 6 "DummyData": 1, 7 "DummyData2":"asdas" 8 }, 9 cropUrl:"Ashx/Cropper.ashx",10 customUploadButtonId: "cropContainerHeaderButton",11 model: false,12 loaderHtml: ‘<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ‘13 }14 var croppic = new Croppic("croppic", croppicHeaderOptions);15 16 var cropContainerModalOptions = {17 uploadUrl: "Ashx/Upload.ashx",18 cropUrl: "Ashx/Cropper.ashx",19 model: true,20 imgEyecandyOpacity: 0.4,21 loaderHtml: ‘<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ‘22 }23 var cropContainerModal = new Croppic("cropContainerModal", cropContainerModalOptions);24 </script>
这其中uploadUrl和cropUrl对应的ashx文件分别是我处理上传图片和剪切图片的后台程序，其他的部分照抄demo里的。
二、上传图片
上传图片的处理程序网上也是一找一大堆的，不过在这个插件里面要注意：根据官方文档，处理以后返回的json代码是固定的，例如处理成功时需返回4个参数，分别是status,url,width和height；而失败时则只需要返回两个参数，分别是status和message。我在后台使用了JavaScriptSerializer进行了json的序列化处理，不用费心费力再去写json语句。以下代码段是上传图片成功时系统应返回的json，当然失败时也类似，这里就不举例了：
{ "status":"success", "url":"path/img.jpg", "width":originalImgWidth, "height":originalImgHeight }我的upload.ashx文件：
try { HttpPostedFile file = context.Request.Files["img"]; string uploadPath = "/images/croppers/"; if (file != null) { var server = HttpContext.Current.Server; string destdir = server.MapPath(uploadPath); if (!System.IO.Directory.Exists(destdir)) System.IO.Directory.CreateDirectory(destdir);//如果文件夹不存在就创建它 string fname = file.FileName; string _file_ext = Path.GetExtension(fname); string dataname = DateTime.Now.ToFileTime().ToString(); string filename = destdir + dataname + _file_ext;//随机名 file.SaveAs(filename); System.Drawing.Image image = System.Drawing.Image.FromFile(filename); MODEL.AjaxMsg m = new MODEL.AjaxMsg(); m.status = "success"; m.url = uploadPath + dataname + _file_ext; m.width = image.Width; m.height = image.Height; JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(m)); } else { MODEL.AjaxMsg m = new MODEL.AjaxMsg(); m.status = "error"; m.message = "文件没找到"; JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(m)); } } catch { MODEL.AjaxMsg m = new MODEL.AjaxMsg(); m.status = "error"; m.message = "服务器错误"; JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(m)); }三、图片剪切
在图片剪切之前，我先对图片进行了缩放处理。开始我也是按照原图的尺寸来剪切图片的，剪切的大小在页面文件里面定好，也就是图片框的大小。但是我发现一旦上传大一点的图片时，croppic插件在显示时会将图片设置成它默认的大小，其后可以根据放大缩小按钮来对图片进行操作，只是此时一旦剪切图片时，剪切的图片并不是我们所见的图片，因为实际图片并没有进行缩放，而只是在显示时进行了假装的缩放。好在插件在剪切时会有imgW和imgH参数传递过来，告诉开发者该图片现在缩放的长宽属性，根据此长宽属性进行缩放以后，我们便可以将我们的原图也进行缩放便于截取图片。
context.Response.ContentType = "text/plain"; string imgurl = context.Request["imgUrl"]; int imgInitW = int.Parse(context.Request["imgInitW"].ToString());//原图宽 int imgInitH = int.Parse(context.Request["imgInitH"].ToString());//原图长 //缩放后图片长宽 int imgW = int.Parse( context.Request["imgW"].ToString()); double HH = Convert.ToDouble(context.Request["imgH"].ToString());//可能在缩放时出现小数点 int imgH = (int)HH; int imgY1 = int.Parse( context.Request["imgY1"].ToString());//剪切点起始坐标Y int imgX1 = int.Parse( context.Request["imgX1"].ToString());//剪切点起始坐标X int cropW = int.Parse( context.Request["cropW"].ToString());//剪切宽度 int cropH = int.Parse( context.Request["cropH"].ToString());//剪切长度 string cropPath = "/images/croppers/"; var server = HttpContext.Current.Server; string destdir = server.MapPath(cropPath); if (!System.IO.Directory.Exists(destdir)) System.IO.Directory.CreateDirectory(destdir); string name = imgurl.Substring(imgurl.LastIndexOf(‘/‘)); name = name.Split(‘/‘).GetValue(1).ToString(); string filename = cropPath + "crops_Thumb_" + name; string imgurl_t = cropPath + "Thumb_" + name; App_Code.ImageHelp imgHelp = new App_Code.ImageHelp(); imgHelp.MakeThumNail(imgurl, imgurl_t, imgW, imgH, "W"); imgHelp.GetPart(imgurl_t, cropPath, 0, 0, cropW, cropH, imgX1, imgY1); MODEL.AjaxMsg m = new MODEL.AjaxMsg(); m.status = "success"; m.url = filename; JavaScriptSerializer js = new JavaScriptSerializer(); context.Response.Write(js.Serialize(m));
其中imgHelp.MakeThumNail()方法是对原图进行缩放，我在这边使用按宽度进行缩放，因为croppic插件也是按照宽度进行缩放的，所以与他一直就好。imgHelp.GetPart()方法则是对图片进行截取。在写这些方法的时候要注意，截取完或者缩放完保存图片时一定要是硬盘的具体路径，比如D://img这样的路径，因为这个错误我之前卡住了好久的。当然，插件也规定了截取图片成功以后返回的参数status和url，这里url不能为硬盘地址了哟，而要使用相对地址，因为这是用来显示到页面的。
四、总结
该插件一旦掌握了以后就不难的。只是目前刚刚学习的版本中，会出现3张图片：原图、缩略图、截取后图片。深入研究以后可以考虑将原图、缩略图删除，只留截取后的图片，这样对服务器负担不会那么大。下一步想尝试一下是不是可以用在手机里，尤其是微信浏览器中，很多都不支持插件。我之前写到微信浏览器中的图片上传还是使用的是input file这种html的原生控件，饶是如此，还是有某些手机不支持微信内部上传。至于uploadify插件更是不可用。
图片剪切之Croppic插件