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
        });
    }