Croppic插件使用介绍-asp.net

具体的参数使用和基本使用方式请看：http://www.uedsc.com/croppic-api.html

需要说明的几点：

1.支持两种上传方式：

(1)先将原图上传至服务器，然后再次将切图信息传给服务器。(两次请求，需要提供uploadUrl和cropUrl两个)

(2)直接将图片通过Data URI scheme的方式将图片缓存在浏览器内，用户切图完毕后同切图信息一并发送至服务器。(一次请求，只需要提供cropUrl)

2.如果需要自定义切图的模板大小，需要修改croppic.js文件，修改如下：

然后在你程序使用的页面内灵活给这两个参数赋值就可以了。

3.后台程序处理的代码共享(注：使用了第二种，一次性上传的方式)

前台：

<div id="croppic"></div>

<script type="text/javascript">
    @{
        if (brand.Type==0)
        {
             <text>
    var my_cropH = 203;
    var my_cropW = 282;
    </text>
        }else {
            <text>
    var my_cropH = 300;
    var my_cropW = 224;
    </text>
        }
    }
    var croppicHeaderOptions = {
        cropData: {
            "Id": '@brand.Id'
        },
        cropUrl: '/Brand/CutImg',
        //customUploadButtonId: 'cropContainerHeaderButton',
        modal: false,
        processInline: true,
        loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
        onBeforeImgUpload: function () { console.log('onBeforeImgUpload') },
        onAfterImgUpload: function () { console.log('onAfterImgUpload') },
        onImgDrag: function () { console.log('onImgDrag') },
        onImgZoom: function () { console.log('onImgZoom') },
        onBeforeImgCrop: function () { console.log('onBeforeImgCrop') },
        onAfterImgCrop: function () { console.log('onAfterImgCrop') },
        onReset: function () { console.log('onReset') },
        onError: function (errormessage) { console.log('onError:' + errormessage) }
    }
    var croppic = new Croppic('croppic', croppicHeaderOptions);
</script>

后台：

public ActionResult CutImg(int? imgInitW, int? imgInitH, decimal? imgW, decimal? imgH, int? imgY1, int? imgX1, decimal? cropH, decimal? cropW, int? rotation)
        {
            //保存图片
            var displayImageStream = Request["imgUrl"] == null ? null : Request["imgUrl"];
            byte[] imgByte = Convert.FromBase64String(displayImageStream.Substring(displayImageStream.IndexOf(",") + 1));
            Image oldImage;
            using (MemoryStream mstream = new MemoryStream(imgByte, 0, imgByte.Length))
            {
                oldImage = Image.FromStream(mstream);
                if (!oldImage.RawFormat.Equals(System.Drawing.Imaging.ImageFormat.Jpeg))
                {
                    return Json(new { status = "error", message = "切图出现问题" });
                }
            }
            //构建新的图片
            var croppedBitmap = new Bitmap((int)cropW, (int)cropH);
            try
            {
                using (var g = Graphics.FromImage(croppedBitmap))
                {
                    Bitmap bitmap = new Bitmap(oldImage, (int)imgW, (int)imgH);
                    g.DrawImage(bitmap,
                       new Rectangle(0, 0, (int)cropW, (int)cropH),
                       new Rectangle((int)imgX1, (int)imgY1, (int)cropW, (int)cropH), GraphicsUnit.Pixel);
                }
            }
            catch (Exception e)
            {
                return Json(new { status = "error", message = "internal error cropping the image" });
            }
            string relativePic = DateTime.Now.ToString("yyyy/MM/dd/") + Guid.NewGuid().ToString() + ".jpg";
            string strNewPic = AppDomain.CurrentDomain.BaseDirectory + relativePic;
            if (!Directory.Exists(Path.GetDirectoryName(strNewPic)))
                Directory.CreateDirectory(Path.GetDirectoryName(strNewPic));
            croppedBitmap.Save(strNewPic);
            return Json(new { status = "success", url = "../../" + relativePic });

}

学习：https://codeload.github.com/danielbcorreia/croppic-net/zip/master 从这个链接学习了部分代码，感谢。