Picture cropping and asynchronous upload plugin--one step (record)

Image upload cropping This function everywhere, some of their own writing, but too time-consuming, plug-in words feel a lot, the previous time to choose a good plug-in, later on with that paragraph, but picked up a few plug-in with the effect is very good, the problem is in the merger, a single plug-in effect is very good, no problem, Otherwise people do not have to eat, but when I put these several plug-ins merged together with a variety of strange problems come out, solve a run out of a come, finally picked a long time found a good use of, on the record down, or later to use again, trouble died, wasting time ah, so record the experience , one step, this also is planted a tree bar, for small white shade.

First step: HTML code

<Scriptsrc= "~/scripts/jquery-1.10.2.min.js"></Script><!--more than 9.0 of the version -<Scriptsrc= "~/js/jquery.form.js"></Script><!--One-step upload submission (upload) This plugin is not cropped, belongs to another download, in order to facilitate the asynchronous upload submission -<Linkhref= "~/css/bootstrap.min.css"rel= "stylesheet" /><Linkhref= "~/css/cropper.css"rel= "stylesheet" /><Linkhref= "~/css/docs.css"rel= "stylesheet" /><Scriptsrc= "~/js/bootstrap.min.js"></Script><Scriptsrc= "~/js/cropper.js"></Script><!--crop upload http://fengyuanchen.github.io/cropper/ -<formAction="#"ID= "Form_upload"Method= "POST">    <labelstyle= "width:60px;height:30px;" for= "Inputimage"title= "Open Picture">        <inputclass= "Hide"ID= "Inputimage"name= "File"type= "File"Accept= "image/*">Browse ...</label>    <!--Upload Tips -    <Divclass= "Upload_tag"></Div>    <Divstyle= "margin-top:10px;">        <Divstyle= "width:100px;height:100px;">                    <imgalt= "Picture"class= "Cropper"src= "/images/background1.jpg" />                </Div><BR/><BR/>            <Divclass= "Preview Preview-lg"></Div>        </Div><BR/><BR/>    <Div>            <inputtype= "Submit"value= "Upload"class= "btn upload_point btn-primary"style= "width:60px;height:30px;" />        </Div></form>

View Code

Step Two: Docs.js code

$ (function () {var $image = $ (". Cropper"), $dataX = $ ("#dataX"), $dataY = $ ("#dataY"), $dataHeigh T = $ ("#dataHeight"), $dataWidth = $ ("#dataWidth"),//console = Window.console | |    {log: $.noop}, Cropper; $image. Cropper ({aspectratio:1,//aspect ratio string/number, the default auto,1 represents a square, and 16/4 represents the number of rectangles autocroparea:0.3,//0 and 1.        Define the size of the auto crop area (percentage) zoomlevel:1,//zoom level//data: {//Only four properties are supported: "X", "Y", "width" and "height", by default the cropping area will appear in the center of the image. x:420,//y:50,//width:100,//height:100//}, preview: ". Preview",//jquer        Y Selector Preview, add additional elements, preview area modal:true,//distinguish cropping area and background dashed:true,//set the clipping area of the grid dashed autocrop:true,//whether the cropping area is automatically displayed dragcrop:true,//to delete the current clipping area, create a new dashed:true on the image by dragging, modal:true, movable:true,//move the cropping area re sizable:true,//Adjust crop area zoomable:true,//enlarge picture rotatable:true,//rotate picture checkimageorigin:true,//Check the source of the image, as Fruit It is a cross-origin image, CrossorThe Igin property is added to the image element so that the "rotate" and "Getdataurl"//maxwidth:100,//the cropping area//maxheight:100,//minwidth:100,//m            Inheight:100, the Done:function (data) {//region changes when the $dataX is triggered. val (data.x);            $dataY. Val (DATA.Y);            $dataHeight. Val (data.height);        $dataWidth. Val (data.width);                        }, Build:function (e) {//trigger before creating crop area}, Built:function (e) {//Create crop area after trigger        $image. Cropper ("Zoom",-1);                    }, Dragstart:function (e) {////crop area moved before triggering}, Dragmove:function (e) {///clipping area is moved when moving    }, Dragend:function (e) {//crop area moved after move}});    $ ("#zoomOut"). Click (function () {$image. Cropper ("Zoom",-1);    });    var $inputImage = $ ("#inputImage"); if (window. FileReader) {//Select picture $inputImage. Change (function () {var filereader = new FileReader (), F            Iles = this.files, file; If (!files.length)            {return;            } file = Files[0];                if (/^image\/\w+$/.test (File.type)) {filereader.readasdataurl (file); Filereader.onload = function () {$image. Cropper ("reset", true). Cropper ("Replace", This.result). CSS ("WI                    DTH "," 100px ");                                    $inputImage. Val ("");            };            } else {showmessage ("Please select Picture.");    }        });    } else {$inputImage. addclass ("Hide");        }});//Upload Code $ (". Upload_point"). Click (function () {//alert ($ (". Cropper"). Cropper ("Getdataurl"), type); return false; $ ("#form_upload"). Ajaxsubmit ({url: "/home/processrequest", type: "Post", Datatyp E: "Text", data: {"Getdataurl": $ (". Cropper"). Cropper ("Getdataurl", {width:50,height:50})},//represents the Base64 diagram The chip character format is submitted to background success:function (data) {$ (". Upload_tag"). TexT (data). CSS ({"Color": "Green", "display": "Block"}); }, Error:function () {$ (". Upload_tag"). Text ("Upload exception, refresh or re-login"). CSS ({"Color": "Red", "Display": "BL                    Ock "});        }        }); return false;});

View Code

Step Three: Background code

1 [HttpPost]2  Public stringProcessRequest (formcollection f)3 {4     Try5     {6             stringBytestr = f["Getdataurl"]. ToString ();//Data:image/png;base64,7                 intDellength = Bytestr.indexof (',') +1;8                 stringstr = bytestr.substring (dellength, Bytestr.length-dellength);9Image Returnimage =base64stringtoimage (str);Ten  OneReturnimage.save (Server.MapPath ("/images/head/") + guid.newguid () +". jpg",  A  - System.Drawing.Imaging.ImageFormat.Jpeg); -     } the     Catch(Exception) -     { -             return "Upload failed"; -     } +         return "Upload Successful"; - } + //Base64 encoded text to image A PrivateImage Base64stringtoimage (stringtxt) at { -     byte[] arr =convert.frombase64string (TXT); -MemoryStream ms =NewMemoryStream (arr); -Bitmap BMP =NewBitmap (MS); -     returnbmp; -}

View Code

Picture cropping and asynchronous upload plugin--one step (record)