JQuery 插件图片裁剪插件cropper.js使用,上传

2018-01-13 11:04:33来源:segmentfault作者:风吹一个大耳东人点击

分享

图片裁剪,压缩是上传图片一定会遇到的问题。这里把我测试cropper.js这款jquery插件的心得分享一下,可以给新手做参考。


引入插件相关文件,你们down到本地也可以。这是最基本的
<script src="https://cdn.bootcss.com/jquery/2.1.0-beta3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.3/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.3/cropper.min.js"></script>
基本的html结构,初始化裁剪框

这里初始化是挂载到img节点上,然后可以外包一个盒子对他的大小来做限制


<div>
<img src="">
<div>左旋</div>
<div>右旋</div>
</div>

参数我就不说了,百度文档一大堆
这里的两个aspectRatio是裁剪框的宽高比例,autoCropArea是裁剪框占裁剪图片的比例


$('.wait-crop').cropper({
aspectRatio: 1 / 1,
autoCropArea: .9
});

到这里已经可以生成一个裁剪框了,不禁要问。如何获得裁剪的图片呢?


获取裁剪后的图片信息

首先我们可以获得裁剪框的canvas节点


var cropCanvas = $('.wait-crop').cropper('getCroppedCanvas')

然后调用canvas API toDataURL('img/jpeg',图片质量(0-1))//图片质量越好图片大小越大


var cropUrl = cropCanvas.toDataURL('image/jpeg', 0.4);

这样就得到了你裁剪的图片了可以通过attr(src),放到你想要的img节点里展示。


附:如果后台不接收base64怎么办?

调用canvas方法 toBlob()获得一个blob对象,再通过以下代码转化为FormData


$('.wait-crop').cropper('getCroppedCanvas').toBlob(function(blob) {
var fd = new FormData();
fd.append("file", blob, 'i.jpeg');
})
附:左右旋转需裁剪的图片
$('.rotate_l').click(function() {
$('.wait-crop').cropper('rotate', -90);
})$('.rotate_r').click(function() {
$('.wait-crop').cropper('rotate', 90);
})
你可能用到base64转blob对象
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台