vant upload 圖片壓縮(個人筆記)

adong發表於2021-06-02
筆記
const img = new Image()
const reader = new FileReader()// 讀取檔案資源
reader.readAsDataURL(file.file)
reader.onload = function(e){ 
    img.src = e.target.result
}

let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
img.onload = () => {
// 指定canvas畫布大小，該大小為最後生成圖片的大小
canvas.width = 1000;
canvas.height = 800;
/* drawImage畫布繪製的方法。(0,0)表示以Canvas畫布左上角為起點，400，300是將圖片按給定的畫素進行縮小。
如果不指定縮小的畫素圖片將以圖片原始大小進行繪製，圖片畫素如果大於畫布將會從左上角開始按畫布大小部分繪製圖片，最後的圖片就是張區域性圖。*/
context.drawImage(img, 0, 0, 1000, 800);
// 將繪製完成的圖片重新轉化為base64編碼，file.file.type為圖片型別，0.92為預設壓縮質量
file.content = canvas.toDataURL(file.file.type, 0.60);
// 最後將base64編碼的圖片儲存到陣列中，留待上傳。
本作品採用《CC 協議》，轉載必須註明作者和本文連結
寫程式碼是一件趣事。

相關文章