cropper.js 二次開發:截圖並下載圖片
阿新 • • 發佈:2019-01-08
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中無法觸發clicka.click(); $(a).remove(); })
紅色的部分是我加的,其餘是原來就有的。
本身自動觸發下載不是一件複雜的事,造一個a標籤,在觸發click事件就行了。
你在使用canvas的時候可能會遇到跨域的問題。
我的解決辦法是chrome擴充套件程式 Allow-Control-Allow-Origin: * 。
開這個擴充套件時就相當於服務端開了跨域,這個看network可以看出來。
關於跨域可以參考:https://segmentfault.com/q/1010000008648867