在使用cropper.js,在獲取canvas裏面的數據時,用於轉換的blob的方法:
$('.img').cropper('getCroppedCanvas').toblob(function(blob){})
所產生的二進制數據會比截圖到的區域大了很多,默認了轉換後是png格式,以及圖片質量,導致截取出的圖片體積非常大,這就給上傳增加了很多的成本,後面的解決辦法就是獲取此時畫取的canvas對象,使用
dataURL=canvas.toDataURL('image/jpeg'); var blob = dataURLtoBlob(dataURL);
來獲得對應的blob從而減少其封裝的方法轉換帶來的數據變大問題,或者就是原來的toblob方法:
canvas.toBlob(function(blob){...}, "image/jpeg", 0.95);
還有一種就是上傳原來的圖片,根據截取獲取的相對截取開始點位置以及截取的長寬對原圖進行重繪得到的原始數據來規避這種操作。但是實際生產是能儘量少傳網絡數據就少傳,所以還是由用戶的機器去承擔這個消耗。