圖片剪切之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": 1,
                "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插件更是不可用。