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

图片裁剪，压缩是上传图片一定会遇到的问题。这里把我测试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 class="croper-box">
        <img src="" class="wait-crop">
        <div class="rotate_l">左旋</div>
        <div class="rotate_r">右旋</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
        });
    }