html实现图片裁剪,JavaScript html js图片切割系统,裁剪,图片处理

图片切割(裁剪)，这里需要声明一下：

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

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

【客户端部分】

客户端部分详细请参考图片切割效果(建议没有看过的先看那里的例子)，这里说说要传递到后台的参数，建议用GetPos获取部分参数：

Js代码

varp = ic.Url, o = ic.GetPos();

x = o.Left,

y = o.Top,

w = o.Width,

h = o.Height,

pw = ic._layBase.width,

ph = ic._layBase.height;

var p = ic.Url, o = ic.GetPos();

x = o.Left,

y = o.Top,

w = o.Width,

h = o.Height,

pw = ic._layBase.width,

ph = ic._layBase.height;

其中，ic.Url是图片地址：ic.Url，o.Left是水平切割，o.Top是垂直切割点，o.Width是切割宽度，o.Height是切割高度，ic._layBase.width是图片宽度，ic._layBase.height是图片高度。

可以这样传递这些参数：

Js代码

$("imgCreat").src ="ImgCropper.ashx?p="+ p +"&x="+ x +"&y="+ y +"&w="+ w +"&h="+ h +"&pw="+ pw +"&ph="+ ph +"&"+ Math.random();

$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();

其中图片地址、图片宽度、图片高度如果是预先设定好的话就可以不传递了。

【后台部分】

后台主要是进行图片的处理和输出。

【图片切割】

在后台获取前台传递的参数：

C#代码

stringPic = Convert.ToString(context.Request["p"]);

intPointX = Convert.ToInt32(context.Request["x"]);

intPointY = Convert.ToInt32(context.Request["y"]);

intCutWidth = Convert.ToInt32(context.Request["w"]);

intCutHeight = Convert.ToInt32(context.Request["h"]);