《javascripthtmljs图片切割系统》由会员分享，可在线阅读，更多相关《javascripthtmljs图片切割系统（6页珍藏版）》请在金锄头文库上搜索。
1、JavaScript html js图片切割系统,裁剪,图片处理关键字: javascript html js 图片 切割 系统 裁剪 处理 图片切割（裁剪），这里需要声明一下： 首先js是不能操作客户端文件的（除非特殊情况），所以图片的切割必须在后台处理，对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理（上传文件不在本次讨论范围，请自行修改）； 还有是通过客户端传递的参数来处理图片，确实能得到展示图或预览图的效果（这是针对有些提出在后台处理的图片得不到预览图的效果来说的），下面会举例说明如何生成展示图那样的图片。 【客户端部分】 客户端部分详细请参考图片切割效果（建
2、议没有看过的先看那里的例子），这里说说要传递到后台的参数，建议用GetPos获取部分参数： Js代码 1. varp=ic.Url,o=ic.GetPos(); 2. x=o.Left, 3. y=o.Top, 4. w=o.Width, 5. h=o.Height, 6. pw=ic._layBase.width, 7. 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._layBa
3、se.height;其中，ic.Url是图片地址：ic.Url，o.Left是水平切割，o.Top是垂直切割点，o.Width是切割宽度，o.Height是切割高度，ic._layBase.width是图片宽度，ic._layBase.height是图片高度。 可以这样传递这些参数： Js代码 1. $(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=
4、 + y + &w= + w + &h= + h + &pw= + pw + &ph= + ph + & + Math.random();其中图片地址、图片宽度、图片高度如果是预先设定好的话就可以不传递了。 【后台部分】 后台主要是进行图片的处理和输出。 【图片切割】 在后台获取前台传递的参数： C#代码 1. stringPic=Convert.ToString(context.Requestp); 2. intPointX=Convert.ToInt32(context.Requestx); 3. intPointY=Convert.ToInt32(context.Requesty); 4
5、. intCutWidth=Convert.ToInt32(context.Requestw); 5. intCutHeight=Convert.ToInt32(context.Requesth); 6. intPicWidth=Convert.ToInt32(context.Requestpw); 7. intPicHeight=Convert.ToInt32(context.Requestph);string Pic = Convert.ToString(context.Requestp);int PointX = Convert.ToInt32(context.Requestx);int
6、 PointY = Convert.ToInt32(context.Requesty);int CutWidth = Convert.ToInt32(context.Requestw);int CutHeight = Convert.ToInt32(context.Requesth);int PicWidth = Convert.ToInt32(context.Requestpw);int PicHeight = Convert.ToInt32(context.Requestph);然后就用这些参数对图片进行切割了，先说说切割的原理，主要分两部：切割和缩放。 切割和缩放的程序关键在这里： C#
7、代码 1. gbmPhoto.DrawImage(imgPhoto,newRectangle(0,0,CutWidth,CutHeight),PointX*imgPhoto.Width/PicWidth,PointY*imgPhoto.Height/PicHeight,CutWidth*imgPhoto.Width/PicWidth,CutHeight*imgPhoto.Height/PicHeight,GraphicsUnit.Pixel);gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, CutWidth, CutHeight), Point
8、X * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);首先是在原图切割出需要的部分。切割需要的参数是PointX、PointY、CutWidth、CutHeight，因为在客户端的程序中是可以缩放原图来进行切割的，所以要在在切割原图时需要先按比例缩放这些参数，还要注意PointX和CutWidth需要水平方向的比例，
9、PointY和CutHeight需要垂直方向的比例。例如（其中imgPhoto是原图）： 水平切割点：PointX * imgPhoto.Width / PicWidth； 切割宽度：CutWidth * imgPhoto.Width / PicWidth； 垂直切割点：PointY * imgPhoto.Height / PicHeight； 切割高度：CutHeight * imgPhoto.Height / PicHeight。 用这些参数就可以对原图进行切割了。 然后是缩放原图。可以想象，当切割好原图后，只要把图宽高缩放到CutWidth和CutHeight就可以得到跟展示图一样的图片
10、了： C#代码 1. newRectangle(0,0,CutWidth,CutHeight),new Rectangle(0, 0, CutWidth, CutHeight), 下面是处理图片的程序： C#代码 1. publicMemoryStreamResetImg(stringImgFile,intPicWidth,intPicHeight,intPointX,intPointY,intCutWidth,intCutHeight) 2. 3. ImageimgPhoto=Image.FromFile(ImgFile); 4. BitmapbmPhoto=newBitmap(CutWid
11、th,CutHeight,System.Drawing.Imaging.PixelFormat.Format24bppRgb); 5. 6. GraphicsgbmPhoto=Graphics.FromImage(bmPhoto); 7. gbmPhoto.DrawImage(imgPhoto,newRectangle(0,0,CutWidth,CutHeight),PointX*imgPhoto.Width/PicWidth,PointY*imgPhoto.Height/PicHeight,CutWidth*imgPhoto.Width/PicWidth,CutHeight*imgPhoto
12、.Height/PicHeight,GraphicsUnit.Pixel); 8. 9. MemoryStreamms2=newMemoryStream(); 10. bmPhoto.Save(ms2,System.Drawing.Imaging.ImageFormat.Jpeg); 11. 12. imgPhoto.Dispose(); 13. gbmPhoto.Dispose(); 14. bmPhoto.Dispose(); 15. 16. returnms2; 17. public MemoryStream ResetImg(string ImgFile, int PicWidth,
13、int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight) Image imgPhoto = Image.FromFile(ImgFile); Bitmap bmPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb); Graphics gbmPhoto = Graphics.FromImage(bmPhoto); gbmPhoto.DrawImage(imgPhoto, new Rectang
14、le(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel); MemoryStream ms2 = new MemoryStream(); bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg); imgPhoto.Dispose(); gbmPhoto.Dispose(); bmPhoto.Dispose(); return ms2;
