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)