.NET + Jcrop 实现在线裁图功能

    最近有这样一个需求，因为一个门户网站首页展示图片很长但很矮，自己截图怕有不到位，所以利用JQUERY 的 Jcrop组件做了一个在线裁图的功能。

初始化

        $('#oldpicImg').Jcrop({
            onChange: showCoords,
            onSelect: showCoords,
            aspectRatio: null
        });

因为在下面加了个选项，在意在change这个事件里面绑定重新初始化

        radios.change(function () {
            imgParameter.scaling = this.value;
            $('#oldpicImg').Jcrop({
                onChange: showCoords,
                onSelect: showCoords,
                aspectRatio: imgParameter.scaling
            });
        })

 

在他本身的onChange和onSelect里，主要是存一下他的坐标，宽，高

function showCoords(obj) {
        imgParameter.x =obj.x;
        imgParameter.y = obj.y;
        imgParameter.w =obj.w;
        imgParameter.h =obj.h;
    }

因为我们组件的原因，在IE7下有问题，会把图片弄为宽高为零，所以我又把他的宽高重新设置了一下

    function resetImgInfo(jqObj, width, height) {
        jqObj.width(width).height(height).show(); 
    }

还有就是图片太大了我做了一下自动等比缩放的功能， 在他加载完成的时候执行

 $cuttingPic.$oldpicImg.load(AutoResizeImage(0, 400, $cuttingPic.$oldpicImg[0]));

 

function AutoResizeImage(maxWidth, maxHeight, objImg) {
    var img = new Image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    var Ratio = 1;
    var w = img.width;
    var h = img.height;
    wRatio = maxWidth / w;
    hRatio = maxHeight / h;
    if (maxWidth == 0 && maxHeight == 0) {
        Ratio = 1;
    } else if (maxWidth == 0) {//
        if (hRatio < 1) Ratio = hRatio;
    } else if (maxHeight == 0) {
        if (wRatio < 1) Ratio = wRatio;
    } else if (wRatio < 1 || hRatio < 1) {
        Ratio = (wRatio <= hRatio ? wRatio : hRatio);
    }
    if (Ratio < 1) {
        w = w * Ratio;
        h = h * Ratio;
    }
    objImg.height = h;
    objImg.width = w;
}

 

然后就用把值传向后台，我用的基于AJAX的WCF，

function cutImg() {
        if (imgParameter.w != 0 && imgParameter.h != 0) {
            SystemUtilService.CuttingImg(pageData.cuttingPicPath, imgParameter.x, imgParameter.y, imgParameter.w, imgParameter.h, imgParameter.curW, imgParameter.curH, function (data) { });
        }
        else {
            //alert(2);
        }
        return true;
    }

在后台这样来接受他

 [OperationContract]
        public bool CuttingImg(string path, int x, int y, int w, int h, int picw, int pich)
        {
            string _path = AppDomain.CurrentDomain.BaseDirectory + path;
            ImageHelper.CropImage(_path, w, h, x, y,  picw, pich);  
            return true;

        }

这里给出一个工具类

 public class ImageHelper
    {
        public static void CropImage(string originamImgPath, int width, int height, int x, int y, int showWidth, int showHeight)
   {
       byte[] CropImage = Crop(originamImgPath, width, height, x, y, showWidth, showHeight);
       using (MemoryStream ms = new MemoryStream(CropImage, 0, CropImage.Length))
       {
           ms.Write(CropImage, 0, CropImage.Length);
           using (System.Drawing.Image CroppedImage = System.Drawing.Image.FromStream(ms, true))
           {
               
               CroppedImage.Save(originamImgPath, CroppedImage.RawFormat);
           }
       }
   }
        private static byte[] Crop(string Img, int Width, int Height, int X, int Y, int showWidth, int showHeight)
   {
       try
       {
           using (Image OriginalImage = Image.FromFile(Img))
           {

              int picW = OriginalImage.Size.Width;
               int picH = OriginalImage.Size.Height;
               //int picW= 1920;
               //int picH = 1080;


               int picWidth = Width * picW / showWidth;
               int picHeight = Height * picH / showHeight;
               int picX = X * picW / showWidth;
               int picY = Y * picH / showHeight;

               using (Bitmap bmp = new Bitmap(picWidth, picHeight, OriginalImage.PixelFormat))
               {
                   bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
                   using (Graphics Graphic = Graphics.FromImage(bmp))
                   {
                       Graphic.SmoothingMode = SmoothingMode.AntiAlias;
                       Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
                       Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
                       Graphic.DrawImage(OriginalImage, new Rectangle(0, 0, picWidth, picHeight), picX, picY, picWidth, picHeight, GraphicsUnit.Pixel);
                       MemoryStream ms = new MemoryStream();
                       bmp.Save(ms, OriginalImage.RawFormat);
                       return ms.GetBuffer();
                   }
               }
           }
       }
       catch (Exception Ex)
       {
           throw (Ex);
       }
   }
    }

解释一下这里

int picWidth = Width * picW / showWidth; int picHeight = Height * picH / showHeight; int picX = X * picW / showWidth; int picY = Y * picH / showHeight;

 

因为在前台是等比压缩了，所以他的x,y,w,h与真实的是不一样的，所以在后台还有处理一下，前台记得传进去当前图片的高与宽

        $cuttingPic.$oldpicImg.attr("src", pageData.cuttingPicPath).load(function () {
            AutoResizeImage(0, 400, $("#oldpicImg")[0]);
            imgParameter.curW = $(this).width();
            imgParameter.curH = $(this).height();
            resetImgInfo($(this), imgParameter.curW, imgParameter.curH);

        });