JS压缩图片，在线图片压缩，Cavas压缩图片
在线DEMOhttps://oktools.net/tinyimg 1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.getElementById('img_output'); let blob; function preview(file) { let reader = new FileReader(); reader.onload = function () { img_original.src = this.result; img_original.onload = () => { console.log('图片原始宽高:', img_original.naturalWidth, img_original.naturalHeight); console.log('图片原始大小:', file.size) } }; reader.readAsDataURL(file); } 2. 使用Canvas压缩 function compress() { // 压缩到图片原始宽高的一半 let w = img_original.naturalWidth / 2; let h = img_original.naturalHeight / 2; let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let anw = document.createAttribute("width"); anw.nodeValue = w; let anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.fillRect(0, 0, w, h); ctx.drawImage(img_original, 0, 0, w, h); const base64 = canvas.toDataURL('image/jpeg', 0.75);// 压缩后质量 const bytes = window.atob(base64.split(',')[1]); const ab = new ArrayBuffer(bytes.length); const ia = new Uint8Array(ab); for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } blob = new Blob([ab], {type: 'image/jpeg'}); console.log('压缩后的图片大小', blob.size); // 预览压缩后的图片 img_output.src = base64 } 3. 保存到本地 function save() { if (blob) { let a = document.createElement('a'); let event = new MouseEvent('click'); a.download = Math.round(new Date() / 1000) + '.jpg'; a.href = URL.createObjectURL(blob); a.dispatchEvent(event) } } 在线DEMO https://oktools.net/tinyimg
