前几天做图片上传时需要进行图片的剪切和缩放，上网查找时找到了这个插件。样式很好看，功能也很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="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插件更是不可用。