1. 程式人生 > 實用技巧 >js 壓縮圖片

js 壓縮圖片

之前使用 exif-js 獲取圖片方向後 修改寬高,旋轉canvas後 對圖片進行壓縮,總是出現純黑色的圖片,所以採用了此種方法。


// base64 轉 blob檔案
export const dataURLtoBlob = (dataurl) => {
	var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
		bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], { type: mime });
}

export const compressImg = (file) => {
	return new Promise((resolve, reject) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		const name = file.name;
		reader.onload = (e) => {
			const dataURL = (e.target as any).result;
			// 圖片小於2M不壓縮
			if (file.size < Math.pow(1024, 2) * 2) {
				console.log('圖片小於2m 不進行壓縮');
				resolve({base64: dataURL, file: file});
				return;
			}
			const img: any = new Image;
			img.src = dataURL, img.onload = function () {
				const w = img.width / 2, // 寬度 
					h = img.height / 2,
					cvs = document.createElement("canvas"),
					o = cvs.getContext("2d");
				cvs.setAttribute("width", w + ''), cvs.setAttribute("height", h + ''), o.drawImage(this, 0, 0, w, h);
				const i = cvs.toDataURL("image/jpeg", 0.8); // 壓縮質量為 0.8  數值越小 壓縮的圖片越模糊 取值區間為 0 - 1
				const _file: any = dataURLtoBlob(i);
				_file.name = name;
				resolve({
					base64: i,
					file: _file
				});
			}
		}

	})

}