js 壓縮圖片
阿新 • • 發佈:2020-08-10
之前使用 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 }); } } }) }