图片裁剪

裁剪图片代码示例：

js代码：

 <link href="../content/imgareaselect-css/imgareaselect-default.css" rel="stylesheet" />
    <script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../js/ajaxfileupload.js"></script>
    <script src="../js/imgareaselect.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $.ajaxFileUpload({
                    url: 'imageCut.ashx',
                    fileElementId: 'file',
                    data: {
                        type:1
                    },
                    success: function (msg) {
                        $('#img').attr('src', $(msg).text());
                        $('#img').imgAreaSelect({
                            selectionColor: 'write',//选择区域的颜色
                            x1: 0,//初始区的左上角的x坐标
                            y1: 0,//初始区的左上角的y坐标
                            x2: 200,//初始区的右下角的x坐标
                            y2: 200,//初始区的右下角的y坐标
                            selectionOpacity: 0.2//选择区的透明度
                        });
                    }
                });
            });//上传图片

            $('#cut').click(function () {


                var ias = $('#img').imgAreaSelect({ instance: true });//获取选择器
                var selection = ias.getSelection();//获取选择区

                $.post(
                    'imageCut.ashx',
                    {
                        type: 2,
                        x1: selection.x1,
                        y1: selection.y1,
                         selection.width,
                        height: selection.height,
                        address: $('#img').attr('src')
                    },
                    function (msg) {
                        $('#img1').attr('src', msg+"?v="+Date.now());
                    });
            });//裁剪图片
        });
    </script>

html代码：

<form id="form1" runat="server">
        <input type="file" name="file" id="file" />
        <input type="button" value="上传" id="btn" /><input type="button" value="裁剪" id="cut" /><br />
        <img src="" id="img" />
        <br />
        <img src="" id="img1" />
    </form>

 后端接收代码：

int x1 =Convert.ToInt32( context.Request["x1"]);
                int y1 =Convert.ToInt32( context.Request["y1"]);
                int width =Convert.ToInt32( context.Request["width"]);
                int height =Convert.ToInt32( context.Request["height"]);
                string address=context.Request["address"];
                //重新构建地址
                string ext = Path.GetExtension(address);
                string path = address.Substring(0, address.IndexOf(ext)) + "_1" + ext;
                string path1 = context.Request.MapPath(path);

                //创建两个画布
                using (Bitmap bitmap1 = new Bitmap(width,height))
                {
                    using (Bitmap bitmap2 = new Bitmap(context.Request.MapPath(address)))
                    {
                        Graphics g = Graphics.FromImage(bitmap1);

                        g.DrawImage(bitmap2, new Rectangle(0, 0, width, height), new Rectangle(x1, y1, width, height), GraphicsUnit.Pixel);

                        bitmap1.Save(path1);

                    }
                }
                context.Response.Write(path);