js使用canvas压缩图片

最新推荐文章于 2025-05-27 11:56:37 发布

原创最新推荐文章于 2025-05-27 11:56:37 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #js

js常用小函数专栏收录该内容

13 篇文章

订阅专栏

这是一个用于压缩图片的JavaScript函数，通过FileReader、Image和Canvas API来实现。它读取文件，创建一个Image对象加载图片，然后在onload事件中获取图片尺寸，创建canvas并设置其大小，填充白色背景，再将图片绘制到canvas上，并使用toDataURL方法以指定的质量值转换为JPEG格式，从而达到压缩效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


    //压缩图片
    Compresspicture(file){
      return new Promise((resolve,reject)=>{
         let r = new FileReader();  //本地预览
         r.readAsDataURL(file)
          r.onload = function(){
            let src=r.result
            const img = new Image();
            img.src = src;
            img.onload = e => {
            const W = img .width;
            const h = img. height;
            const quality = 0.8; 
            const canvas = document. createElement('canvas');
            const ctx = canvas . getContext( '2d');
            //创建属性节点
            const anw = document . createAttribute("width");anw. nodeValue = W;
            const anh = document . createAttribute("height");anh. nodeValue = h;
            canvas . setAttributeNode(anw);
            canvas. setAttributeNode(anh);
            //底色PNG转JPEG时透明区域会变黑色
            ctx. fillStyle="#fff";
            ctx. fillRect(0, 0, W, h);
            ctx. drawImage(img, 0, 0, W, h);
            //quality値越小, 所绘制出的图像越横楜
            const base64 = canvas. toDataURL( 'image/jpeg', quality);
            }
          }
       })
     }