利用canvas實現圖片壓縮的範例程式碼

作者：Eve Cole 更新時間：2025-02-01 10:36:02

專案中做身分證辨識時，需要傳送圖片的base64 格式編碼，但是手機拍攝的照片都太大了，轉成base64 簡直可怕，因此找了一下解決辦法

涉及到的知識點

onchange 事件是在上傳完檔案之後觸發
使用files 屬性取得到上傳的檔案對象
readAsDataURL 用於轉換成base64 編碼
區分canvas 的畫布和繪畫環境：
- 畫布：對應程式碼中的cvs，可以設定畫布width，height；
- 繪畫環境：對應程式碼中的ctx ，可以設定fillStyle，fillRect 等；
使用canvas 內建的drawImage() 方法將圖片畫到canvas 上
想取到壓縮後圖片的base64 可以使用canvas 自帶的toDataURL() 方法

完整程式碼

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449，544KB</div> <img src= <hr> <div>400×224，157KB</div> <canvas></canvas> <script > // 上傳圖片function loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); let file = me.files[0]; // 取得到檔案物件// 上傳的圖片大於500KB 時才壓縮if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); reader.readAsDataURL(file); // 轉成base64編碼reader.onload = function (e) { let naturalBase64 = e.target.result; // 取得base64 編碼，這是原圖的img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight; // 取得原圖比例,為了等比壓縮cvs.width = 400; cvs.height = cvs.width / ratio; let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 畫在canvas 上/// 壓縮後新圖的base64 let zipBase64 = cvs.toDataURL(); } } } } } </script></body></html>

效果圖

關於壓縮後的圖片大小

這裡提供一個開箱即用的方法，baseStr 就是一個完整的Base64 編碼，就是包含

base64

代碼：

 function calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length); var eqTagIndex = baseStr.indexOf('='); baseStr = eqTagIndex!=-qTagIndex!=-qTagIndex!=-qTagIndex!=-qTagIndex!= 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length; var fileSize = strLen - (strLen / 8) * 2; console.log(檔案大小: + (fileSize / 1024).toFixed(1) + 'KB');}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。