canvas实现图片压缩

来源：互联网发布：网络水军怎么看编辑：程序博客网时间：2024/06/04 17:43

使用H5canvas实现图片压缩

   用于移动端图片上传，由于现在手机拍的照片动辄几M，如果直接上传速度慢也没有必要，这里利用H5 canvas实现图片压缩   基本原理是通过canvas渲染图片，再通过 toDataURL 方法压缩保存为base64字符串（能够编译为jpg格式的图片）

       //  利用canvas压缩图片，传入四个参数，分别是data:获取到的文件，w, h 要压缩的宽高， 和一个回调函数将获取到的压缩文件传递出去      canvasCompressPic(data, w, h, callback) {        let newImg = new Image();        newImg.src = data;        let imgWidth, imgHeight;        newImg.onload = () => {          let img = document.createElement('img');          img.src = newImg.src;          imgWidth = img.width;          imgHeight = img.height;          let canvas = document.createElement('canvas');          let ctx = canvas.getContext('2d');          if (imgWidth > imgHeight) {            imgWidth = w * imgWidth / imgHeight;            imgHeight = h;          } else {            imgHeight = h * imgHeight / imgWidth;            imgWidth = w;          };          canvas.width = imgWidth;          canvas.height = imgHeight;          ctx.clearRect(0, 0, w, h);          // 处理png格式图片背景变黑的问题          ctx.fillStyle = '#fff';          ctx.fillRect(0, 0, canvas.width, canvas.height);          ctx.drawImage(img, 0, 0, imgWidth, imgHeight);          let rate = 0.7;          let base64 = canvas.toDataURL('image/jpeg', rate);          callback(base64);        };      }

阅读全文

0 0