超好用的原生 JS + Canvas 进行图片压缩

迈不过友情╰ 2023-01-01 14:57 180阅读 0赞

![在这里插入图片描述][20210103170522737.gif_pic_center]

<!DOCTYPE html>
    <html>
    
    <head>
    </head>
    
    <body>
      <input type="file" id="upload">
      <p id="p"></p>
      <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg', 'image/webp']; // 限定图片文件类型 const MAXSIZE = 1024 * 1024 * 3; // 限定图片最大容量 const MAXSIZE_STR = '3MB'; function convertImageToBase64(file, cb) { let reader = new FileReader(); reader.addEventListener('load', function (e) { const base64Image = e.target.result; // 获取文件内容，等同于 reader.result cb(base64Image); reader = null; }); reader.readAsDataURL(file); // 读取 file 对象中的内容 } function compress(base64Image, cb) { let maxW = 1024; let maxH = 1024; const image = new Image(); image.addEventListener('load', function () { let ratio; // 压缩比 let needCompress = false; // 是否需要压缩 if (maxW < image.naturalWidth) { needCompress = true; ratio = image.naturalWidth / maxW; maxH = image.naturalHeight / ratio; } if (maxH < image.naturalHeight) { needCompress = true; ratio = image.naturalHeight / maxH; maxW = image.naturalWidth / ratio; } if (!needCompress) { maxW = image.naturalWidth; maxH = image.naturalHeight; } const canvas = document.createElement('canvas'); canvas.setAttribute('id', '__compress__'); canvas.width = maxW; canvas.height = maxH; canvas.style.visibility = 'hidden'; document.body.append(canvas); const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, maxW, maxH); ctx.drawImage(image, 0, 0, maxW, maxH); // 渲染图片 const compressImage = canvas.toDataURL('image/jpeg', 0.9); // 压缩图片 cb(compressImage); const _image = new Image(); _image.src = compressImage; document.body.appendChild(_image); canvas.remove(); // 移除 canvas document.getElementById('p').innerHTML = `压缩比 ${ image.src.length / _image.src.length}` }); image.src = base64Image; // 将图片设置到 image 的 src 属性中 document.body.appendChild(image); } function uploadImage(compressImage) { console.log('upload image to server...', compressImage); } const upload = document.getElementById('upload'); upload.addEventListener('change', function (e) { const file = e.target.files[0]; console.log(file); if (!file) { return; } const { type: fileType, size: fileSize } = file; // 图片类型检查 if (!ACCEPT.includes(fileType)) { alert('不支持上传该格式文件！'); upload.value = ''; return; } // 图片大小检查 if (fileSize > MAXSIZE) { alert('文件超出' + MAXSIZE_STR + '！'); upload.value = ''; return; } // 压缩文件 convertImageToBase64(file, (base64Image) => compress(base64Image, uploadImage)); }); </script>
    </body>
    
    </html>

![在这里插入图片描述][2021010317064056.gif_pic_center]

[20210103170522737.gif_pic_center]: /images/20221120/003acfb8b1534183813512cc21fa47db.png
[2021010317064056.gif_pic_center]: /images/20221120/599547c451e64de2b11f1bbf837b69c2.png