（此教程包括前端實現圖片裁剪，後端進行獲取裁剪區並保存）

最近有一個需求，微信公眾號上傳圖片，支持自定義裁剪。

以前用過一款裁剪插件cropper，很久沒用了，不知道對移動端操作兼容如何，重新從網上搜索更合適的插件

首先試過PhotoClip，這個插件裁剪區域是固定的，不能自定義縮放（也許需求太匆忙沒有研究透，亦或者可以修改原文件優化這一點），對於用戶體驗不夠好，故，放棄

然後又遇到一款插件---Jcrop，完美符合需求，項目結合百度插件 WebUploader上傳獲取原圖，可適配移動端選取相冊/拍照上傳，獲取到選擇的照片設置給Jcrop（jcrop.setImage(response.url);）進行裁剪

Jcrop優勢：

• 對所有圖片均unobtrusively（無侵入的，保持DOM簡潔）
• 支持寬高比例鎖定
• 支持 minSize/maxSize設置
• 支持改變選區或移 動選區時的回調（Callback）
• 支持用鍵盤微調選區
• 通過API創建互動，比如動畫效果
• 支持CSS樣式
• 簡單便捷，js和css通俗易懂，便於維護

Jcrop實現非常簡答， 有興趣繼續看下文：

1、引用js文件和css文件：

　　<script type="text/javascript" src="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.Jcrop.js"></script>
    <script type="text/javascript" src="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.color.js"></script>
    <link rel="stylesheet" href="@(WeixinConfig.ResourceAddress)js/jcrop/jquery.Jcrop.css">

2、定義裁剪DOM，僅需要一個Img標簽

　　　　<div id="jcropBox" style="width: 100%; height: 90%;">
            <!-- This is the image we‘re attaching Jcrop to -->
            <img src="" id="jcropTarget"  />
        </div>

3、初始化Jcrop

// 默認參數初始化Jcrop
$("#jcropTarget").Jcrop();  

僅需上面三個步驟，就能完成一個支持移動、縮放、拖放的圖片裁剪

也可以自定義初始化Jcrop的展現形式

　　　　　　$(‘#jcropTarget‘).Jcrop({
                onChange: showCoords,
                onSelect: showCoords,
                onRelease: clearCoords,
                boxWidth: jcropW,
                boxHeight: jcropH,
                handleSize: isMobile() === 0 ? 28 : 15
            }, function () {
                jcrop = this;
                jcrop.setSelect([130, 65, 130 + 350, 65 + 285]);
                jcrop.setOptions({
                    bgFade: true,
                    bgOpacity: 0.5,
                    bgColor: ‘black‘,
                    addClass: ‘jcrop-light‘,
                    handleOffset: 20
                });
            });

文章最後有各參數說明表格，此處不做一一解釋

　　　　　　　function showCoords(c) {
                x = c.x;
                y = c.y;
                w = c.w;
                h = c.h;
            };

            function clearCoords() {
                $(‘#coords input‘).val(‘‘);
            };

進一步對圖片進行保存，我采取的是獲取裁剪圖片的x,y,width,height

添加一個裁剪按鈕

<button id="btnSaveJcropImg" class="btnJcrop">裁剪</button>

註冊click事件，把最終裁剪的x,y,w,h參數傳給後端，進行分析保存

　　　　 /// <summary>
        /// 保存裁剪後的新圖片（通過x,y,w,h對原圖進行截取）
        /// </summary>
        /// <param name="x"></param>
        /// <param name="y"></param>
        /// <param name="w"></param>
        /// <param name="h"></param>
        /// <param name="fileName">文件名，WebUploader上傳到服務器的原圖</param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult JcropUploadProcess(int x, int y, int w, int h, string fileName)
        {
            try
            {
                ViewBag.YearEndUploadUrl = yearEndUploadUrl;

                //保存到臨時文件夾
                string path = "/upload/yearend/";

                string localPath = HttpContext.Server.MapPath(path);
                if (!System.IO.Directory.Exists(localPath))
                {
                    System.IO.Directory.CreateDirectory(localPath);
                }
                localPath = HttpContext.Server.MapPath(path + "/temp");
                if (!System.IO.Directory.Exists(localPath))
                {
                    System.IO.Directory.CreateDirectory(localPath);
                }

                // 圖片路徑
                string oldPath = System.IO.Path.Combine(localPath, fileName);
                // 新圖片路徑
                string newPath = System.IO.Path.GetExtension(oldPath);
                newPath = oldPath.Substring(0, oldPath.Length - newPath.Length) + "_new" + newPath;

                //定義截取矩形
                System.Drawing.Rectangle cropArea = new System.Drawing.Rectangle(x, y, w, h); //要截取的區域大小

                //加載圖片
                System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(System.IO.File.ReadAllBytes(oldPath)));

                //定義Bitmap對象
                System.Drawing.Bitmap bmpImage = new System.Drawing.Bitmap(img);

                //進行裁剪
                System.Drawing.Bitmap bmpCrop = bmpImage.Clone(cropArea, bmpImage.PixelFormat);

                //保存成新文件
                bmpCrop.Save(newPath);

                //釋放對象
                img.Dispose();
                bmpCrop.Dispose();

                //獲取文件名+後綴
                string filePathName = System.IO.Path.GetFileName(newPath);

                return Json(new
                {
                    ret = 0,
                    jsonrpc = "2.0",
                    id = "id",
                    filePath = filePathName,
                    url = yearEndUploadUrl + "temp/" + filePathName
                });
            }
            catch (Exception ex)
            {
                return Json(new { ret = 1, jsonrpc = 2.0, error = new { code = 102, message = ex.Message }, id = "id" });
            }
        }

最後附上擴展說明

Options參數說明

API方法說明

jQuery Jcrop插件下載（其中css文件有部分優化）

支持移動端裁剪圖片插件Jcrop（結合WebUploader上傳）