Asp.Net平台下的圖片線上裁剪功能的實現

最近項目中有個圖片線上裁剪功能,本人尋找資料,方法如下:前台展現用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;           }       }

接下是最重要的裁剪方法:

  public void ImgReduceCutOut(int startX, int startY, int int_Width, int int_Height, string input_ImgUrl, string out_ImgUrl)       {           // 上傳標準圖大小           int int_Standard_Width = 150;           int int_Standard_Height = 80;//其實在圖片裁剪過程中還可以傳更多的參數,如把原始圖片縮小了再進行裁剪.本執行個體中是裁剪後,再裁剪後的圖片縮小成150X80

              //通過串連建立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