Use jquery's Imagecropper plugin to do user avatar upload compatible mobile end

During the development of the mobile side, you may encounter problems with cropping the picture. Of course, there are problems, no matter what method you want to be resolved, even if it is ugly, ugly point, all have to go out.

Picture cropped jquery plug-ins have a lot of, I also tested a lot, but most of them support the PC side of the picture clipping, and support the mobile side of the picture cropped less, very fluent may be less.

As a novice, I tried a number of solutions, in the initial time to try to write a jquery plugin to support the touch screen events, and so on, wrote out, but feel embarrassed to take the shot, let alone take out the commercial.

And try to find some plug-ins, a try. Finally comprehensive evaluation, feel good jquery plug-ins: Cropper this jquery created.

A look at the feeling is still quite simple. demo:http://fengyuanchen.github.io/cropper/

The following is my use of the process of some code, I hope to be helpful.

Plug-in import:

<link rel= "stylesheet" href= "/css/delimg/cropper.css"/>
<script src= "/js/libs/jquery.min.js" ></script>
<script src= "/js/delimg/cropper.js" ></script>

A necessary bit of HTML code:

<div class= "Img-container" >

</div>

Note: In general, the picture is dynamically generated, so the current SRC value is empty. If you are a static image to intercept the image, it is much simpler. Look at the code below to understand.

Use of plug-ins (very simple):

var $image = $ ('. Img-container > img ');

$image. attr ("src", imgurl);

$image. On ("Load", function () {//wait for the picture to be loaded successfully before the picture is cropped
$image. Cropper ({
Aspectratio:1/1//1:1 of the proportion of the cut, can be any proportion of their own adjustment
});
})

Now just to do a framework, the most important is the following code, get to the image of the data is the most important, so we need to use the canvas of the supernatural, the image of the cropped parts into the base64 of the string to the back-end data interaction.

However, Cropper does not provide you with a ready-made base64 string, but he gives you a string of data objects for your own free rein.

When you click on a button, make sure the highlighted part is trimmed:

$ (selector). On ("Tap", function () {
var src = $image. EQ (0). attr ("src");
var canvasdata = $image. Cropper ("Getcanvasdata");
var cropboxdata = $image. Cropper (' Getcropboxdata ');

Converttodata (SRC, canvasdata, cropboxdata, function (Basechar) {
function processing after callback
});
})

Of course, this is not the point, the focus is the following function processing:

function converttodata (URL, canvasdata, Cropdata, callback) {
var cropw = cropdata.width; Cut the width
var croph = cropdata.height; Cut the width
var IMGW = canvasdata.width; Picture zoom or enlarge after the height
var imgh = canvasdata.height; Picture zoom or enlarge after the height

var poleft = Canvasdata.left-cropdata.left; Canvas Locate the left position of the picture
var potop = canvasdata.top-cropdata.top; Canvas position the top position of the picture

var canvas = document.createelement ("Canvas");
var ctx = Canvas.getcontext (' 2d ');

Canvas.width = CROPW;
Canvas.height = Croph;

var img = new Image ();
img.src = URL;

Img.onload = function () {
This.width = IMGW;
This.height = IMGH;
The main point here is to understand the relationship between canvas and picture cropping.
Ctx.drawimage (This, Poleft, Potop, This.width, this.height);
var base64 = Canvas.todataurl (' image/jpg ', 1); Here the "1" refers to the resolution of the image (0-1), of course, the smaller the picture the more blurred, the size of the image processed after the smaller
Callback && Callback (base64)//Callback Base64 string
}
}

All right, here we go. The processing of things are processed, of course, here a zoom reduction of the positive processing, if you need to rotate some of the pictures, such as the operation of some columns, is also available, here just to show you a simple demo implementation, if useful, can be used as a reference.

Implementation scenario: Using the Imagecropper.js plug-in in jquery to implement

Imagecropper.js This source I looked for a long time to find Http://pan.baidu.com/s/1oDqRO

Little code, no comment.

Css

<style>
Body
{
padding:0;
margin:0;
height:100%;
Background-color: #eee;
font-size:12px;
Color: #666;
}

A
{
Text-decoration:none;
Color: #333;
}

A:hover
{
Text-decoration:none;
Color: #f00;
}

#container
{
Position:absolute;
left:20px;
top:20px;
}

#wrapper
{
Position:absolute;
left:0px;
top:40px;
}

#cropper
{
Position:absolute;
left:0px;
top:0px;
border:1px solid #ccc;
}

#previewContainer
{
Position:absolute;
left:350px;
top:60px;
}

. Preview
{
border:1px solid #ccc;
}

#selectBtn
{
Position:absolute;
left:0px;
top:0px;
width:119px;
height:27px;

}

#saveBtn
{
Position:absolute;
left:150px;
top:0px;
width:67px;
height:27px;

}

#rotateLeftBtn
{
Position:absolute;
left:0px;
top:315px;
width:100px;
height:22px;
padding-left:25px;
padding-top:2px;

}

#rotateRightBtn
{
Position:absolute;
left:225px;
top:315px;
width:50px;
height:22px;
padding-right:25px;
padding-top:2px;

}

</style>

Html

<body onload= "Init ();" >
<div id= "Container" >
<a id= "selectbtn" href= "javascript:void (0);" onclick= "document.getElementById (' Input '). Click ();" > Selection </a>
<a id= "savebtn" href= "javascript:void (0);" onclick= "saveimage ();" > Save </a>
<input type= "file" id= "input" size= "style=" Visibility:hidden; "onchange=" Selectimage (this.files) "/>"

<div id= "wrapper" >
<canvas id= "Cropper" ></canvas>
<a id= "rotateleftbtn" href= "javascript:void (0);" onclick= "Rotateimage (event);" > Rotate Left </a>
<a id= "rotaterightbtn" href= "javascript:void (0);" onclick= "Rotateimage (event);" > Rotate Right </a>

<span id= "status" style= "position:absolute;left:350px;top:10px;width:100px;" ></span>
<div id= "Previewcontainer" >
<canvas id= "preview180" width= "180" height= "180" class= "Preview" ></canvas>
<span style= "display:block;width:100%;p adding-top:5px;text-align:center;" > Large size picture, 180x180 pixel </span>

<canvas id= "preview100" width= "height=" "style=" position:absolute;left:230px;top:0px; "class=" Preview " ></canvas>
<span style= "Position:absolute;left:230px;top:110px;width:100px;text-align:center;" > Medium size picture 100x100 pixel </span>

<canvas id= "preview50" width= "height=" "style=" position:absolute;left:255px;top:150px; class= "Preview" ></canvas>
<span style= "Position:absolute;left:245px;top:210px;width:70px;text-align:center;" > Small size picture 50x50 pixel </span>
</div>
</div>

</div>
</body>

Finally, the JS section.

var Cropper;

function init ()
{
Binding
Cropper = new Imagecropper (300, 300, 180, 180);
Cropper.setcanvas ("Cropper");
Cropper.addpreview ("preview180");
Cropper.addpreview ("preview100");
Cropper.addpreview ("preview50");
Detects whether the user's browser supports Imagecropper Plug-ins
if (!cropper.isavaiable ())
{
Alert ("Sorry, your browser doesn ' t support FileReader, please use firefox3.6+ or chrome10+ to run it.");
}
}

Open Local picture
function Selectimage (filelist)
{
Cropper.loadimage (Filelist[0]);
}

Rotate picture
function Rotateimage (e)
{
Switch (e.target.id)
{
Case "ROTATELEFTBTN":
Cropper.rotate (-90);
Break
Case "ROTATERIGHTBTN":
Cropper.rotate (90);
Break
}
}

Upload pictures
function SaveImage ()
{
Choose the size you need.
var imgdata = cropper.getcroppedimagedata (180, 180);
Console.log ("uploaded:" +imgdata);
Write your upload code here.
}