cropper.js 二次開發：截圖並下載圖片

cropper.js 是一個基於jquery的圖片截取庫。

參考：https://blog.csdn.net/weixin_38023551/article/details/78792400 

我的代碼也是基於這個同學的demo。

全程代碼很長，所以我只貼出我改了的部分。

 

代碼：

    $("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        
        console.log(base64url); //生成base64圖片的格式
        $('.cavans').html(cas)  //在body顯示出canvas元素
        
        var a = document.createElement('a');   // 轉換完成，創建一個a標簽用於下載
        a.download = 'image' + new Date().getTime() + '.jpeg';
        a.href = base64url;
        $("body").append(a);    // 修復firefox中無法觸發click
 a.click(); $(a).remove();
    })

紅色的部分是我加的，其余是原來就有的。

 

本身自動觸發下載不是一件復雜的事，造一個a標簽，在觸發click事件就行了。

 

你在使用canvas的時候可能會遇到跨域的問題。

我的解決辦法是chrome擴展程序 Allow-Control-Allow-Origin: * 。

開這個擴展時就相當於服務端開了跨域，這個看network可以看出來。

關於跨域可以參考：https://segmentfault.com/q/1010000008648867