当前位置: 首页 > Web前端 > HTML

JavaScript压缩图片,使用Canvas压缩图片

时间:2023-04-02 11:36:29 HTML

1.选择一张图片constimg_original=document.getElementById('img_original');constimg_output=document.getElementById('img_output');让斑点;functionpreview(file){让reader=newFileReader();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(文件);}2。UseCanvascompressionfunctioncompress(){//压缩到图像原始宽度和高度的一半letw=img_original.naturalWidth/2;让h=img_original.naturalHeight/2;让canvas=document.createElement('canvas');让ctx=canvas.getContext('2d');让anw=document.createAttribute("width");anw.nodeValue=w;让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);constbase64=canvas.toDataURL('image/jpeg',0.75);//压缩质量constbytes=window.atob(base64.split(',')[1]);constab=newArrayBuffer(bytes.length);constia=newUint8Array(ab);for(leti=0;i