Cropper.js Picture Clipping

Recently do the Electronic Business card project, but the personal photo show appeared on the user upload picture size is serious imbalance, so the request to cut the picture, and then I do research on the picture clipping is not too mature to change

The implementation of the principle is that the foreground to obtain the coordinates of the image of the original file to the background to crop

This is a plugin I found on the Internet. Cropper features are very powerful

This is the Official document .

The first use of Cropper must be to introduce the corresponding CSS and JS, as well as jquery

<script src= "Jquery.js" ></script><link  href= "cropper.css" rel= "stylesheet" ><script src= " Cropper.js "></script>

HTML structure, cropper is for IMG So configuration items need to be configured on img

<div class= "Container" >    </div>

Relative JS configuration (This is a part of the application of the parameters of the project if later changes need to be configured according to the API)

$ ('. Container > img '). Cropper ({//Here is an img-trimmed picture for parameter configuration            aspectratio:720/425,//crop box ratio            preview: $ ('. Avatar-preview '),///preview Container mincontainerheight:1080,//container minimum height autocroparea:0.9,//initialize crop box size (proportional to picture size) movable:false,/ /Whether you can move the crop box (here you can move the picture crop box in the same state as you want to set) dragcrop:false,//not allowed to reopen the crop box            resizable:false,//does not allow to change the size of the crop box            crop: The function (data) {                //data is x, y width, height rotate ScaleX scaley The coordinates of the crop box, and the cropped picture is a long-width rotation angle scale such as                $ (' #x '). Val (data.x);                $ (' #y '). Val (data.y);                Console.log (' W ' +data.width+ '   height ' +data.height);            },            //These callback functions             build:function (e) {// is the picture drawn to the start of the Cropper auto-generated canvas start                  //Transition effect              },              built:function (e) {//Loading finish  drawing completed to get to the corresponding data                           }                 });            

：

And when you move the picture, you get the data

When uploading, using Fromdata but when calling Ajax, the problem will be addressed later using a special method to solve later research

        var data = new FormData ();        Data.append ("X", Math.floor (Myval (' x ')));        Data.append ("Y", Math.floor (Myval (' y ')));        Data.append ("W", Math.floor (Myval (' W ')));        Data.append ("H", Math.floor (Myval (' H ')));        Data.append ("File", $ ("#imgUpload") [0].files[0]);        Data.append ("Name", $ ("#imgUpload"). Val ());        Data.append (' Jsonpcallback ', ' a ');

Because of the error, I was told this way, but I can only get the value from the error.

$.ajax ({

    "Type": ' Post ',
    "url": "Imagecut",
    "DataType": "JSON",
    "Data": Data,
    Tell jquery not to process the sent data  sent by the Fromdata object
    Processdata:false,
    Tell jquery not to set the Content-type request header
    Contenttype:false,
    Success:function (RESP) {
        Console.log (RESP)
    },
    Error:function (data) {
        if (data.status==200) {
This is the online address of the cropped image.
           Console.log (Data.responsetext); 
 }
 }

});

Upload the way,

1. The form form can be used to

2.ajax upload (convert image to BASE64 encoding)

The HTML structure of the Demo

<form action= "Http://172.16.105.43:8080/vcard/imageCut" enctype= "Multipart/form-data" method= "post" id= "form" > <div class= "pic" > <a href= "javascript:void (0)" class= "Add" ><input type = "File" name= "file" id= "Imgupload"/></a> <div class= "Mask_box" > &lt ;d IV class= "container" >  < /div> <input type= "hidden" name= "x" id= "x" value= "0"/> <input typ                        E= "hidden" name= "y" id= "y" value= "0"/> <input type= "hidden" name= "W" id= "W" value= "720"/> <input type= "hidden" name= "H" id= "H" value= "425"/> <div class= "Btn_ Submit "><span onclick=" Cancel () > Cancel </span><span class= "right" onclick= "upload ()" > Complete </span ></div> </dIv> </div></form> 

Cropper.js Picture Clipping