js + .Net 图片切割系统

核心提示：本文示例源代码或素材下载 上一阵子做过一个JavaScript 图片切割效果，得到很多人关注，js + .Net 图片切割系统，其中有很多人向我询问如何做一个真正的图片切割（裁剪），这里需要声明一下：首先js是不能操作客户端文件的（除非特殊情况），程序说明：【客户端部分】客户端部分详细请参考JavaScript

本文示例源代码或素材下载

上一阵子做过一个JavaScript 图片切割效果，得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割（裁剪），这里需要声明一下：

首先js是不能操作客户端文件的（除非特殊情况），所以图片的切割必须在后台处理，对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理（上传文件不在本次讨论范围，请自行修改）；

还有是通过客户端传递的参数来处理图片，确实能得到展示图或预览图的效果（这是针对有些提出在后台处理的图片得不到预览图的效果来说的），下面会举例说明如何生成展示图那样的图片。

程序说明：

【客户端部分】

客户端部分详细请参考JavaScript 图片切割效果（建议没有看过的先看那里的例子），这里说说要传递到后台的参数，这些参数包括：

图片地址：ic.Url；

水平切割点：ic.Drag.offsetLeft；

垂直切割点：ic.Drag.offsetTop；

切割宽度：ic.Drag.offsetWidth；

切割高度：ic.Drag.offsetHeight；

图片宽度：ic.Width；

图片高度：ic.Height。

在前台传递这些参数：

Code

var p = ic.Url,
x = ic.Drag.offsetLeft,
y = ic.Drag.offsetTop,
w = ic.Drag.offsetWidth,
h = ic.Drag.offsetHeight,
pw = ic.Width,
ph = ic.Height;
　　
$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();