項目中上傳頭像base64圖片太大導致上傳時間過長,或者後臺奔潰問題,所以前端壓縮base64大小解決這個問題
原理使用canvas
進行圖片壓縮
參數說明:
base64String
:需要壓縮的base64圖片
w
: 圖片的原始圖片大小
quality
: 0.7 // 值越小,所繪製出的圖像越模糊
示例:
let base64Img = this.compressImg(file.content, 100, 0.7);
base64Img
就是壓縮完成後的base64圖片
compressImg(base64String, w, quality) {
var getMimeType = function(urlData) {
var arr = urlData.split(",");
var mime = arr[0].match(/:(.*?);/)[1];
return mime;
};
var newImage = new Image();
var imgWidth, imgHeight;
var promise = new Promise(resolve => (newImage.onload = resolve));
newImage.src = base64String;
return promise.then(() => {
imgWidth = newImage.width;
imgHeight = newImage.height;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
if (Math.max(imgWidth, imgHeight) > w) {
if (imgWidth > imgHeight) {
canvas.width = w;
canvas.height = (w * imgHeight) / imgWidth;
} else {
canvas.height = w;
canvas.width = (w * imgWidth) / imgHeight;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(newImage, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL(
getMimeType(base64String),
quality
);
console.log(base64);
return base64;
});
}