最近项目需要头像裁剪的功能，在网上找了一下，发现了github上的cropper项目还不错，借鉴了一下。。用起来挺简单的，下面是我做的一个小例子：

开始先放个成品图：

下面给出前后端的代码

前端页面是一个单独的jsp页面，用来做弹出层来裁剪图片比较好。

关于jsp页面引用的两个关于cropper的 文件，我就不提供了。大家需要的可以去官方的github上去下载。

pageEncoding="UTF-8"%>

Insert title here

.container {

max-width: 640px;

margin: 20px auto;

}

img {

max-width: 100%;

}

#result img{

max-width: 200px;

max-height: 200px;

}

.cropper-view-box,

.cropper-face {

border-radius: 50%;

}

function getSize(size){

var num=parseInt(size);

if(num<=300){//先要求图片的大小小于300之间

return num;

}

return getSize(num/2);

}

function getRoundedCanvas(sourceCanvas) {

var canvas = document.createElement('canvas');

var context = canvas.getContext('2d');

var width = sourceCanvas.width;

var height = sourceCanvas.height;

width=getSize(width);

height=width;

canvas.width = width;

canvas.height = height;

context.beginPath();

//这里是控制裁剪区域的大小(这里也决定你所要生成的图片的大小和形状 我这边用的是圆形的头像 大家有别的需要可以修改)

context.arc(width/2, height/2, Math.min(width, height)/2, 0, 2 * Math.PI);

context.strokeStyle = 'rgba(0,0,0,0)';

context.stroke();

context.clip();

context.drawImage(sourceCanvas, 0, 0, width, height);

return canvas;

}

$(function(){

var $image = $('#image');

var $button = $('#button');

var $result = $('#result');

var croppable = false;

$image.cropper({

aspectRatio: 1,

viewMode: 1,

ready: function () {

croppable = true;

}

});

$button.on('click', function () {

var croppedCanvas;

var roundedCanvas;

if (!croppable) {

return;

}

// 裁剪

croppedCanvas = $image.cropper('getCroppedCanvas');

//判断图片大小,如果超过1080 则返回

if(croppedCanvas.width>1080){

alert("图片过大,请重新选择!");

return false;

}

// 生成圆形

roundedCanvas = getRoundedCanvas(croppedCanvas);

//将裁剪区域的图片转出图片的base64编码，放到表单里提交到后台。后台再对其进行解码，保存。

$("#icon").val(roundedCanvas.toDataURL());

$.ajax({

url:'${path }/front/saveUserIcon',

data:$("#submitForm").serialize(),

type:'POST',

success:function(data){

if(data.code==200){

parent.location.reload(); // 父页面刷新

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

parent.layer.close(index);

}else{

warningAlert(data.msg);

}

}

});

return false;

});

//当选择完图片后，直接提交表单到后台，图片保存后再回到此页面。这样此页面的图片裁剪画布就改变成你所选择的图片了

$("#file").change(function(){

var fileName=$("#file").val();

fileName=fileName.toLowerCase();

if((fileName.indexOf(".jpg")!=-1)||(fileName.indexOf(".png")!=-1)||(fileName.indexOf(".jpeg")!=-1)||(fileName.indexOf(".bmp")!=-1)||(fileName.indexOf(".gif")!=-1)){

$("#imageUploadForm").submit();

}else{

alert("所选图片格式错误或者不支持此类图片格式！");

}

return false;

});

});