HTML5 uploading local images, online previews and cropping (Filereader,canvas)

1 we often need to upload avatar, click the Upload button need to preview, using the FileReader method does not need to interact with the background, the code is as follows:

//preview of local pictures before uploading//Image upload Previewfunctionpreviewimage (file) {if(File.files && File.files[0])  {            varimg = document.getElementById (' Imghead '); varReader =NewFileReader (); //load after reading file completeReader.onload =function(evt) {img.src=Evt.target.result; }      //start reading fileReader.readasdataurl (file.files[0]); }  }  

2 We can now preview, and then often we need to cut a piece of the line, the mouse can be drawn on the image of the size of the box, the code is as follows:

//StartX, starty the initial coordinates when the mouse is clicked//DIFFX, Diffy is the difference between the initial coordinates of the mouse and the upper-left corner of the box for draggingvarStartX, Starty, DIFFX, Diffy;//whether to drag, initially falsevardragging =false;//Window.onload=function (e) {//e = e | | window.event;     //is there a boxvarExistbox =false; //mouse button downDocument.onmousedown =function(e) {StartX=E.pagex; Starty=E.pagey; if(Isimg (Startx,starty)!==true){                return false; }                //If the mouse is pressed on the box    if(E.target.classname.match (/box/)) {        //Allow dragdragging =true; //Set the current box ID to Moving_box        if(document.getElementById ("Moving_box")!==NULL) {document.getElementById ("Moving_box"). RemoveAttribute ("id")); } e.target.id= "Moving_box"; //Calculate coordinate differenceDIFFX = StartX-E.target.offsetleft; Diffy= Starty-E.target.offsettop; }    Else {        //If the page has been drawn with box, you cannot draw the second box        if(existbox===true){            return false; }                    //Create a box on the page        varActive_box = document.createelement ("div"); Active_box.id= "Active_box"; Active_box.classname= "box"; Active_box.setattribute ("Name", "box"); Active_box.style.top= Starty + ' px '; Active_box.style.left= StartX + ' px ';        Document.body.appendChild (Active_box); Active_box=NULL; }    //prevent browser from dragging picturesE.preventdefault ();}; //Mouse MovementDocument.onmousemove =function(e) {//Update Box size    if(document.getElementById ("Active_box")!==NULL) {                                varAB = document.getElementById ("Active_box"); Ab.style.width= E.pagex-startx + ' px '; Ab.style.height= E.pagey-starty + ' px ';    Canvasimg (e); }           //move, update the box coordinates    if(document.getElementById ("Moving_box")!==NULL&&dragging) {                varMB = document.getElementById ("Moving_box"); varimg = document.getElementById (' Imghead '); Mb.style.top= E.pagey-diffy + ' px '; Mb.style.left= e.pagex-diffx + ' px ';    Canvasimg (e);       }}; //Mouse Lift upDocument.onmouseup =function(e) {//prohibit draggingdragging =false; if(document.getElementById ("Active_box")!==NULL) {        varAB = document.getElementById ("Active_box"); Ab.removeattribute ("id"); Existbox=true; //if the length and width are less than 3px, remove box        if(Ab.offsetwidth < 3 | | Ab.offsetheight < 3) {document.body.removeChild (AB); Existbox=false; }    }};

3 Box Selection We can use Canvas's DrawImage method to draw it. Next to the code above:

functioncanvasimg (e) {varImg=document.getelementbyid ("Imghead"); varC=document.getelementbyid ("MyCanvas"); varCtx=c.getcontext ("2d"); C.style.display= "Block"; if(document.getElementById ("Active_box")!==NULL) {        varAB = document.getElementById ("Active_box"); Ab.style.width= E.pagex-startx + ' px '; Ab.style.height= E.pagey-starty + ' px '; C.height=parseint (ab.style.height); C.width=parseint (ab.style.width); Ctx.drawimage (Img,startx-img.offsetleft,starty-img.offsettop,parseint (Ab.style.width), parseint (ab.style.height), 0,0, parseint (ab.style.width), parseint (Ab.style.height)); }           //move, update the box coordinates    if(document.getElementById ("Moving_box")!==NULL&&dragging) {        varMB = document.getElementById ("Moving_box"); Mb.style.top= E.pagey-diffy + ' px '; Mb.style.left= e.pagex-diffx + ' px '; C.height=parseint (mb.style.height); C.width=parseint (mb.style.width); Ctx.drawimage (Img,parseint (mb.style.left)-img.offsetleft,parseint (mb.style.top)-img.offsettop,parseint (mb.style.width), parseint (mb.style.height), 0,0, parseint (mb.style.width), parseint (Mb.style.height)); }}

4 demo effect and source download can be clicked Demo

HTML5 uploading local images, online previews and cropping (Filereader,canvas)