Using HTML5 canvas to achieve the clipping of pure front-end upload images

Today, we share a front-end way to crop pictures.

Many sites have the ability to set up a user's avatar, the user can select a local image, and then use the site's crop tool to crop, and then set the size, the right position of the avatar.
of course, there are some of the Internet with JS write such as cutting plug-ins, but there are many are the front end of the image of some of the cutting parameters (such as coordinates) to the backstage, there are Java programmers to do real picture clipping. Today, I researched some of them and did a pure front cut demo, as follows:

1.html part:
<div>
<input type= "File" id= "Imgfile" >
</div>
<div style= "Width:300px;height:300px;position:absolute;left:300px;top:0;display:inline-block" >

<div style= "width:150px;height:150px;border:1px solid #4fb8e3;p osition:absolute;left:0;top:0;z-index:1000" id= " Choosebox "></div>
</div>
<div style= "position:absolute;left:700px;top:0" >
<canvas id= "Mycan" width= "height=" ></canvas>
<button id= "cut" > Cropping files </button>
<button id= "BTN" > Back to get cropped files </button>

</div>

The page is initially as follows:

2. The second step of the file selection after the preview operation

var Can=document.getelementbyid ("Mycan");
var Btn=document.getelementbyid ("btn");
var Returnimg=document.getelementbyid ("Returnimg");
var Ctx=can.getcontext ("2d");

$ (' #imgFile '). Change (function () {
   var file=$ (' #imgFile ') [0].files[0];
    var reader=new filereader ();
    reader.onload= function (e) {
        $ (' #demoImg '). attr (' src ', e.target.result);
    };
    Reader.readasdataurl (file);
});

3. Cropping

Notice that the task image has a blue border selection box (fixed size, no zoom), move the blue marquee to the location you want, click Crop file

$ (' #cut '). Click (function () {
    var newx=$ (' #chooseBox '). Position (). left*3.45;
    var newy=$ (' #chooseBox '). Position (). top*2.6;
    var Img=document.getelementbyid ("Demoimg");
    Console.log (Newx,newy);
    Ctx.drawimage (img,newx,newy,150*3.45,150*2.6,0,0,150,150);
});

4. Pass the cropped picture to the background and show the returned picture

Btn.onclick=function () {
    var data=can.todataurl ();
    Data=data.split (', ') [1];
    Data=window.atob (data);
    var ia = new Uint8array (data.length);
    for (var i = 0; i < data.length; i++) {
        Ia[i] = data.charcodeat (i);
    }
    var blob=new blob ([ia],{type: "Image/png", Endings: ' Transparent '});
    var fd=new FormData ();
    Console.log (BLOB);
    Fd.append (' Avatarfile ', blob, ' image.png ');
    var httprequest=new xmlhttprequest ();
    Httprequest.open (' POST ', '/guest/avatar ', true);
    Httprequest.send (FD);
    httprequest.onreadystatechange= function () {
        if (httprequest.status==200 && httprequest.readystate==4) {
            Console.log (Httprequest.responsetext);
            $ (' #returnImg '). attr (' src ', '/images/' +json.parse (httprequest.responsetext). JSON);
        }
    };
};

The entire demo has four points to note:

1. After uploading the image, use FileReader to convert the image file into a Base64 PNG format picture to achieve a preview

2. Move the image selection box, use the Mousedown,mouseup,mouseup event

3.HTML5 Canvas to achieve the effect of picture cropping

4. Use HTML5 formData to convert the image file to a Blob object and pass it to the background

Full source please go to my GitHub project address:

Https://github.com/hyq2015/canvas_crop_img

Reference Document: http://blog.csdn.net/cuixiping/article/details/45932793

1190000000754560

        http://blog.csdn.net/oscar999/article/details/36373183

Using HTML5 canvas to achieve the clipping of pure front-end upload images