图片剪切之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的部分吧。

  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script>
         var croppicHeaderOptions = {
             uploadUrl: "Ashx/Upload.ashx",
             cropData: {
                 "DummyData": ,
                 "DummyData2":"asdas"
             },
             cropUrl:"Ashx/Cropper.ashx",
             customUploadButtonId: "cropContainerHeaderButton",
             model: false,
             loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '
         }
         var croppic = new Croppic("croppic", croppicHeaderOptions);

         var cropContainerModalOptions = {
             uploadUrl: "Ashx/Upload.ashx",
             cropUrl: "Ashx/Cropper.ashx",
             model: true,
             imgEyecandyOpacity: 0.4,
             loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> '
         }
         var cropContainerModal = new Croppic("cropContainerModal", cropContainerModalOptions);
     </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插件更是不可用。