cropper.js 超级好用的裁剪图片工具

最近要做一个照片裁剪功能。就选用了cropper.js

代码如下：贴出来

<div class="container">

<div class="row">
<div class="col col-6">
<img id="image" src="${dcutpic }" alt="Picture">
</div>
<div class="col col-4">
<div class="preview"></div>
</div>
</div>
</div>

 

<script type="text/javascript">
$(function () {
// $(\'#image\').cropper(\'setData\',{width:\'400px\',
// height:\'300px\'});
var $previews = $(\'.preview\');
$(\'#image\').cropper({
//preview: ".preview",
//
ready: function (e) {
$(this).cropper(\'reset\');
var $clone = $(this).clone().removeClass(\'cropper-hidden\');
console.log($clone);
$clone.css({
display: \'block\',
width: \'100%\',
minWidth: 0,
minHeight: 0,
maxWidth: \'none\',
maxHeight: \'none\'
});

$previews.css({
width: \'263\'
}).html($clone);



var previewWidth = $previews.width();
console.log(previewWidth);
},
crop: function (e) {
var imageData = $(this).cropper(\'getImageData\');
console.log(2354);
console.log(imageData);
var previewAspectRatio = e.width / e.height;
console.log(previewAspectRatio);
var previewWidth = $previews.width();
console.log(previewWidth);
var previewHeight = previewWidth / previewAspectRatio;
var imageScaledRatio = e.width / previewWidth;

$previews.height(previewHeight).find(\'img\').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.y / imageScaledRatio
});
canvas=$(\'#image\').cropper(\'getCroppedCanvas\',{fillColor: \'#fff\',
imageSmoothingEnabled: false,
imageSmoothingQuality: \'high\'});

console.log(canvas);
console.log(convertCanvasToImage(canvas));

},
minContainerWidth:400
});
$(\'#image\').cropper(\'scale\', 1);
});
//canvas转换图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}

 

最后一步是直接将转化后的图片插入到div里面

$(\'#carPhoto\').empty().append(convertCanvasToImage(canvas));

 

至此就结束了。