JQuery 插件圖片裁剪插件cropper.js使用,上傳

SHERlocked93 發(fā)布于2019-08-22 13:46 / 3102人閱讀

摘要：圖片裁剪，壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節(jié)點然后調(diào)用圖片質(zhì)量圖片質(zhì)量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過，放到你想要的節(jié)點里展示。

圖片裁剪，壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下，可以給新手做參考。

引入插件相關(guān)文件,你們down到本地也可以。這是最基本的

基本的html結(jié)構(gòu),初始化裁剪框

這里初始化是掛載到img節(jié)點上，然后可以外包一個盒子對他的大小來做限制

參數(shù)我就不說了，百度文檔一大堆
這里的兩個aspectRatio是裁剪框的寬高比例，autoCropArea是裁剪框占裁剪圖片的比例

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

到這里已經(jīng)可以生成一個裁剪框了，不禁要問。如何獲得裁剪的圖片呢？

獲取裁剪后的圖片信息

首先我們可以獲得裁剪框的canvas節(jié)點

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

然后調(diào)用canvas API toDataURL("img/jpeg",圖片質(zhì)量(0-1))//圖片質(zhì)量越好圖片大小越大

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

這樣就得到了你裁剪的圖片了可以通過attr(src)，放到你想要的img節(jié)點里展示。

附：如果后臺不接收base64怎么辦？

調(diào)用canvas方法 toBlob()獲得一個blob對象，再通過以下代碼轉(zhuǎn)化為FormData

    $(".wait-crop").cropper("getCroppedCanvas").toBlob(function(blob) {
        var fd = new FormData();
        fd.append("file", blob, "i.jpeg"); 
    }）

附：左右旋轉(zhuǎn)需裁剪的圖片

    $(".rotate_l").click(function() {
        $(".wait-crop").cropper("rotate", -90);
    })

    $(".rotate_r").click(function() {
        $(".wait-crop").cropper("rotate", 90);
    })

你可能用到base64轉(zhuǎn)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
        });
    }