jquery.imgareaselectをウェブサイトに集めて、画像のローカルプレビューと選択の切り取りを実現します.

imgArea Select はい、そうです  Michal Wojciechowskiが開発した非常に使いやすいjqueryプラグインで、画像の切り取り機能を実現しました.その文書やデモもとても詳しいです.みんなはhttp://odyniec.net/projects/imgareaselect/に行って、より多くの詳細を知ることができる.
次に私達はimgArea Selectを使い始めます. codeを始めましょう
第一はやはりjqueryを引用して、引き続き引用してダウンロードするのが良いです. jquery.imgareaselect.pack.jsファイルと imgareaselect-default.cssスタイルファイル.
次に元素ラベルを書きます.

<img id="ferret" src="" alt="It's coming right for us!" title="It's coming right for us!"
        style="float: left; margin-right: 10px; width: 400px; height: 300px" />
    
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="x2" value="" />
    <input type="hidden" name="y2" value="" />
    <input id="loadFile" type="file" name="name" onchange="readURL(this);" />
    <input type="submit" name="submit" value="Submit" />

 これは写真を示したり、切り取り画像の座標点を記録したりするために使われます.
続いてjsを書き始めます

<script type="text/javascript">
        //    
        function preview(img, selection) {
            var scaleX = 100 / (selection.width || 1);
            var scaleY = 100 / (selection.height || 1);

            $('#ferret + div > img').css({
                width: Math.round(scaleX * 400) + 'px',
                height: Math.round(scaleY * 300) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
            });
        }

        $(document).ready(function () {
            //    
            $('<div><img id="ferret1"  src="" style="position: relative;" /><div>')
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#ferret'));
            //    
            $('#ferret').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '4:3', onSelectChange: preview, onSelectEnd: function (img, selection) {
                $('input[name="x1"]').val(selection.x1);
                $('input[name="y1"]').val(selection.y1);
                $('input[name="x2"]').val(selection.x2);
                $('input[name="y2"]').val(selection.y2);
            }
            });
        });


        //    
        function readURL(input) {
            var strSrc = $("#loadFile").val();

            //              
            var pos = strSrc.lastIndexOf(".");
            var lastname = strSrc.substring(pos, strSrc.length);
            if (lastname.toLowerCase() != ".jpg") {
                alert("         " + lastname + "，      JPG   ");
                return false;
            }

            //               
            if (input.files[0].size / 1024 > 150) {
                alert("           150K  ！");
                return false;
            }


            if (input.files && input.files[0]) {
                var reader = new FileReader();


                reader.onload = function (e) {
                    $('#ferret').attr('src', e.target.result);
                    $('#ferret1').attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

 上記のjsはローカルプレビューを完成しました.(ここのプレビューはchromeで正常です.IEの中に一部の問題があります.しばらくローカルプレビューの方法が見つかりませんでした.みんなはリモートで置換できます.)と画像の切り取り機能があります.
先が終わったら、後端のコードを書き始めます.

protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                int x1 = Convert.ToInt32(Request["x1"]);
                int y1 = Convert.ToInt32(Request["y1"]);
                int x2 = Convert.ToInt32(Request["x2"]);
                int y2 = Convert.ToInt32(Request["y2"]);


                HttpFileCollection files = Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFile file = files[i];
                    file.SaveAs(Server.MapPath("Upload/" + file.FileName));

                    //     
                    int Thumbnailwidth = 400;
                    int Thumbnailheight = 300;
                    //    bmp    
                    Bitmap bitmap = new Bitmap(Thumbnailwidth, Thumbnailheight);

                    //        
                    Graphics graphic = Graphics.FromImage(bitmap);

                    //          
                    graphic.InterpolationMode = InterpolationMode.High;

                    //     ,           
                    graphic.SmoothingMode = SmoothingMode.HighQuality;

                    //               
                    graphic.Clear(System.Drawing.Color.Transparent);

                    //   
                    Bitmap originalImage = new Bitmap(file.InputStream);

                    //                        
                    graphic.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, Thumbnailwidth, Thumbnailheight),
                        new System.Drawing.Rectangle(0, 0, originalImage.Width, originalImage.Height),
                        System.Drawing.GraphicsUnit.Pixel);

                    //     
                    System.Drawing.Image ThumbnailImage = System.Drawing.Image.FromHbitmap(bitmap.GetHbitmap());

                    //      
                    Bitmap selectbitmap = new Bitmap(x2-x1, y2-y1);

                    //        
                    Graphics selectgraphic = Graphics.FromImage(selectbitmap);
                   

                    //  
                    selectgraphic.DrawImage(ThumbnailImage, 0, 0, new Rectangle(x1, y1, x2 - x1, y2 - y1), GraphicsUnit.Pixel);

                    //  
                    selectbitmap.Save(Server.MapPath("Upload/"+Guid.NewGuid() + file.FileName), ImageFormat.Jpeg);

                   //todo:       

                }
            }
        }

 ここではまず写真をフロントの大図と同じ比率に縮小してから切り取りしてファイルに保存します.
自動回転http://www.cnblogs.com/WilliamWang/archive/2012/09/17/imgareaselect.html