imgAreaSelect实现切割图片和上传

1. imgAreaSelect是一款强大的基于jQuery的图片切割插件,图片选择框可以按一定的比例实现。

 function SetAreaSelect(){
        selectInstances = $("#imageBrowse").imgAreaSelect({
            handles: true,  //在改变大小的时候显示改变框
            instance: true, //会返回一个对选择区域图像的一个引用，以便能够进一步使用API
            onSelectEnd:function(img,selection){
                //获得选择区域
                selectionX1 = selection.x1;
                selectionY1 = selection.y1;
                selectionX2 = selection.x2;
                selectionY2 = selection.y2;
                selectionWidth = selection.width;
                selectionHeight = selection.height;
            },
            onSelectChange: function(img,selection){
                Ext.getCmp("txtWidth").setValue(selection.width);
                Ext.getCmp("txtHeight").setValue(selection.height);
            }
        });
    }

参考：
http://odyniec.net/projects/imgareaselect/

另外，cloudgamer也实现浏览、切割等超炫效果：

http://www.cnblogs.com/cloudgamer/archive/2008/10/05/1303993.html

http://www.cnblogs.com/cloudgamer/archive/2008/07/21/1247267.html

 

2. 实现上传切割图片，原理是把原图上传到服务器后，根据切割范围对其进行处理

 //上传图片
 var picCtrl = Ext.get('imageBrowse').dom;
 args = {
    x1: selectionX1, //起点X
    y1: selectionY1, //起点Y
    width: selectionWidth, //切割宽度
    height: selectionHeight, //切割高度
    pwidth: picCtrl.width, //显示区域宽度
    pheight: picCtrl.height //显示区域高度
 };
 picture_form.getForm().submit({
    url: '../../Handlers/EvaluationHandler.ashx?action=O6',
    params: args,
    waitMsg: 'Uploading your photo...',
    success: function(f, a){
       selectInstances.cancelSelection();
       Ext.getCmp("txtWidth").setValue("");
       Ext.getCmp("txtHeight").setValue("");
       picture_win.close();
    }
 });

/// <summary>
    /// 接收图片上传
    /// </summary>
    /// <param name="context"></param>
    private void Process_O6(HttpContext context)
    {
        string sx1 = context.Request["x1"].Trim();
        string sy1 = context.Request["y1"].Trim();
        string width = context.Request["width"].Trim();
        string height = context.Request["height"].Trim();
        string pwidth = context.Request["pwidth"].Trim();
        string pheight = context.Request["pheight"].Trim();
        int x1 = 0, y1 = 0, cutWidth = 0, cutHeight = 0,picWidth = 0,picHeight = 0;
        int.TryParse(sx1, out x1);
        int.TryParse(sy1, out y1);
        int.TryParse(width, out cutWidth);
        int.TryParse(height, out cutHeight);
        int.TryParse(pwidth, out picWidth);
        int.TryParse(pheight, out picHeight);
        string filePath = context.Request.PhysicalApplicationPath + "Images\\Upload\\";
        if (!Directory.Exists(filePath))
        {
            Directory.CreateDirectory(filePath);
        }
        string clientFile = context.Request.Files[0].FileName;
        int pointIndex = clientFile.LastIndexOf(".");
        string lastName = clientFile.Substring(pointIndex);
        string fileName = System.Guid.NewGuid().ToString();
        string path = filePath + fileName + lastName;
        //暂存原图
        context.Request.Files[0].SaveAs(path);
        //如果没有切割即使用原图，则不再做处理
        if (cutHeight > 0 && cutWidth > 0)
        {
            MemoryStream tempStream = ResetImg(path, picWidth, picHeight, x1, y1, cutWidth, cutHeight);
            FileStream cutFs = new FileStream(path, FileMode.Create);//用切割后的图覆盖临时上传的原图
            tempStream.WriteTo(cutFs);
            tempStream.Close();
            cutFs.Close();
        }
        _requestResult.data = new { success = true, url = fileName + lastName }; 
    }

/// <summary>
    /// 对缩放的原始图片进行切割
    /// </summary>
    /// <param name="ImgFile">原始图片的位置</param>
    /// <param name="PicWidth">缩放后的图片宽度</param>
    /// <param name="PicHeight">缩放后的图片高度</param>
    /// <param name="PointX">切割缩放后图片的X起点</param>
    /// <param name="PointY">切割缩放后图片的Y起点</param>
    /// <param name="CutWidth">缩放图切割的宽度</param>
    /// <param name="CutHeight">缩放图切割的宽度</param>
    /// <returns>原始图切割出的流</returns>
    public MemoryStream ResetImg(string ImgFile, int PicWidth, 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 Rectangle(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;
    }