JavaScript html js图片切割系统.doc

JavaScript html js图片切割系统,裁剪,图片处理 关键字: javascript html js 图片 切割 系统 裁剪 处理 图片切割（裁剪），这里需要声明一下： 首先js是不能操作客户端文件的（除非特殊情况），所以图片的切割必须在后台处理，对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理（上传文件不在本次讨论范围，请自行修改）； 还有是通过客户端传递的参数来处理图片，确实能得到展示图或预览图的效果（这是针对有些提出在后台处理的图片得不到预览图的效果来说的），下面会举例说明如何生成展示图那样的图片。 【客户端部分】 客户端部分详细请参考图片切割效果（建议没有看过的先看那里的例子），这里说说要传递到后台的参数，建议用GetPos获取部分参数： Js代码 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;?? 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#代码 string?Pic?=?Convert.ToString(context.Request[p]); ?? int?PointX?=?Convert.ToInt32(context.Request[x]); ?? int?PointY?=?Convert.ToInt32(context.Request[y]); ?? int?CutWidth?=?Convert.ToInt32(context.Request[w]); ?? int?CutHeight?=?Convert.ToInt32(context.Request[h]); ?? int?PicWidth?=?Convert.ToInt32(context.Request[pw]); ?? int?PicHeight?=?Convert.ToInt32(context.Request[ph]);?? string Pic = Convert.ToString(context.Request[p]); int PointX = Convert.ToInt32(context.Request[x]); int PointY = Convert.ToInt32(context.Request[y]); int CutWidth = Convert.ToInt32(context.Request[w]); int CutHeight = Convert.ToInt32(context.Request[h]); int PicWidth = Convert.ToInt32(context.Request[pw]); int PicHeight = Convert.ToInt32(context.Request[ph]); 然后就用这些参数对图片进行切割了，先说说切割的原理，主要分两部：切割和缩放。 切割和缩放的程序关键在这里： C#代码 gbmPhoto.DrawImage(imgPhoto,?new?Rectangle(0,?0,?CutWidth,?Cu