Cropper.js Picture Clipping

Source: Internet
Author: User

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
Tell jquery not to set the Content-type request header
Success:function (RESP) {
Console.log (RESP)
Error:function (data) {
if (data.status==200) {
This is the online address of the cropped image.

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://" 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

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: 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.