最近项目中有个图片在线裁剪功能,本人查找资料,方法如下:前台展现用jquery.Jcrop实现,后台使用 System.Drawing.Image类来进行裁剪.
1.前台展现实现
网上找到这个jquery.Jcrop,稍看了下,发现它提供的效果完全能满足项目需求.
官方网址:http://deepliquid.com/content/Jcrop.html,感兴趣的朋友可去看看.
页面先引用相关样式和脚本:
<link href="Styles/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.Jcrop.js" type="text/javascript"></script>
页面body部分代码:
<asp:Label ID="Label1" Text="原始图片" runat="server"></asp:Label><br /> <asp:Image ID="target" runat="server" /> <br /> <asp:Label ID="Label2" runat="server" Text="最终显示效果"></asp:Label> <div id="preImg" style="width: 150px; height: 80px; overflow: hidden;"> <asp:Image ID="preview" alt="Preview" runat="server" /> </div>
其中ID为preImg的Style的width和height的值是裁剪图片的尺寸,而且要定义这个DIV的overflow:hidden.能够及时看到图片的裁剪效果的关键CSS属性就是它了.
接下来讲讲jquery.Jcrop.js的基本用法,及相关javascript的实现.
首先定义一些临时变量,来保存相关参数
var jcrop_api, boundx, boundy;
然后给图片的DOM元素绑定Jcrop功能,相关的方法属性看英文就能明白其中的意思.
$('#target').Jcrop({ onChange: updatePreview, onSelect: updatePreview, onRelease: clearCoords, aspectRatio: 150 / 80, minSize: _minarray, setSelect: _array }, function () { var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; });
//此方法是用来及时展现图片裁剪效果
function updatePreview(c) { if (parseInt(c.w) > 0) { var rx = 150 / c.w; var ry = 80 / c.h; var _width; var _height; if (Math.round(rx * boundx) > $targetImg.width()) { _width = $targetImg.width(); } else { _width = Math.round(rx * boundx); } if (Math.round(ry * boundy) > $targetImg.height()) { _height = $targetImg.height(); } else { _height = Math.round(ry * boundy); } $('#preview').css({ width: _width + 'px', height: _height + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } $('#x1').val(c.x); $('#y1').val(c.y); $('#Iwidth').val(c.w); $('#Iheight').val(c.h); };
另一部分前台代码:
<form id="Form1" runat="server"> <asp:HiddenField ID="HdnNewImgPath" runat="server" /> <asp:HiddenField ID="x1" runat="server" /> <asp:HiddenField ID="y1" runat="server" /> <asp:HiddenField ID="Iwidth" runat="server" /> <asp:HiddenField ID="Iheight" runat="server" /> <br /> <asp:Button ID="SaveImg" runat="server" Text="裁剪并保存图片" OnClick="saveImg" OnClientClick="return CheckIMG()" /> </form>
后台代码的实现:
首先引用相关命名空间
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Design;
保存按钮的方法,从页面取到相关参数,然后调用裁剪方法.
protected void saveImg(object sender, EventArgs e) { if (IsPostBack) { string tempurl = Path.Combine(ConfigAccess.UploadImagePath, _url); int startX = int.Parse(x1.Value); int startY = int.Parse(y1.Value); int width = int.Parse(Iwidth.Value); int height = int.Parse(Iheight.Value); ImgReduceCutOut(startX, startY, width, height, tempurl, tempurl); this.target.Visible = false; this.Label1.Visible = false; this.SaveImg.Enabled = false; } }
|
接下是最重要的裁剪方法:
< SPAN style = "COLOR: blue" >public void </ SPAN >ImgReduceCutOut(< SPAN style = "COLOR: blue" >int </ SPAN >startX, < SPAN style = "COLOR: blue" >int </ SPAN >startY, < SPAN style = "COLOR: blue" >int </ SPAN >int_Width, < SPAN style = "COLOR: blue" >int </ SPAN >int_Height, < SPAN style = "COLOR: blue" >string </ SPAN >input_ImgUrl, < SPAN style = "COLOR: blue" >string </ SPAN >out_ImgUrl) |
{ |
< SPAN style = "COLOR: green" >// 上传标准图大小 |
</ SPAN >< SPAN style = "COLOR: blue" >int </ SPAN >int_Standard_Width = 150; |
< SPAN style = "COLOR: blue" >int </ SPAN >int_Standard_Height = 80; |
|
< SPAN style = "COLOR: green" >//其实在图片裁剪过程中还可以传更多的参数,如把原始图片缩小了再进行裁剪.本实例中是</ SPAN >< SPAN style = "COLOR: #008000" color = "#008000" >裁剪后,再裁剪后的图片缩小成150X80</ SPAN > |
//通过连接创建Image对象 System.Drawing.Image oldimage = System.Drawing.Image.FromFile(input_ImgUrl); oldimage.Save(Server.MapPath("temp.jpg"));//把原图Copy一份出来,然后在temp.jpg上进行裁剪,最后把裁剪后的图片覆盖原图
oldimage.Dispose();//一定要释放临时图片,要不之后的在此图上的操作会报错,原因冲突
Bitmap bm = new Bitmap(Server.MapPath("temp.jpg")); //处理JPG质量的函数 ImageCodecInfo[] codecs = ImageCodecInfo.GetImageEncoders(); ImageCodecInfo ici = null; foreach (ImageCodecInfo codec in codecs) { if (codec.MimeType == "image/jpeg") { ici = codec; break; } } EncoderParameters ep = new EncoderParameters(); ep.Param[0] = new EncoderParameter(Encoder.Quality, (long)level); // 裁剪图片 Rectangle cloneRect = new Rectangle(startX, startY, int_Width, int_Height); PixelFormat format = bm.PixelFormat; Bitmap cloneBitmap = bm.Clone(cloneRect, format); if (int_Width > int_Standard_Width) { //缩小图片 System.Drawing.Image cutImg = cloneBitmap.GetThumbnailImage(int_Standard_Width, int_Standard_Height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero); cutImg.Save(out_ImgUrl, ici, ep); cutImg.Dispose(); } else { //保存图片 cloneBitmap.Save(out_ImgUrl, ici, ep); } cloneBitmap.Dispose(); bm.Dispose(); } public bool ThumbnailCallback() { return false; }
至此,图片在线裁剪功能完成 |
主要页面源码:source