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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.