前端图片压缩Canvas

‍图片压缩Canvas

#关于如何实现压缩

查阅MDN找到的是这个API：

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

// callback处理blob主要，type图片类型，encoderOptions图片压缩比例 0-1

canvas.toBlob(callback, type, encoderOptions);

Demo

这里看到压缩效果已经由原来的8.5Mb到了1.6Mb左右,这里有个问题Mac上面的压缩效果没Win好(尴尬了)。

#实现代码

   

   

   

   

   

   

        onchange="handleFiles(event,this.files)">

    点击上传

#流程

1.new FileReader()

首先需要的是利用这个API来读取文件，实例化之后采用 readAsDataURL 的方式来读取图片的资源路径,这里的兼容性不错，囊阔了几乎所有浏览器版本和平台。

reader.readAsDataURL(file); //这样读取图片，上述例子可以多选操作，所以循环了下

2.reader.onload的回调中创建图片

// 创建图片内容constimg =newImage();// 将图片地址绑定到base64,这里遇到一个问题采用event.target.result取不到当前，reader下面有result属性可用img.src = reader.result;

3.创建画布，绘制图片内容

// 创建canvas画布

const elem = document.createElement('canvas');

// 设置画布大小

elem.width = width;

elem.height = height;

//获取️

const ctx = elem.getContext('2d')

// 绘制

ctx.drawImage(img, 0, 0, width, height); // drawImage这里查看MDN文档即可

// 植入页面

document.body.append(elem);

4.划重点压缩，将canvas压缩大小转为image对象

ctx.canvas.toBlob((blob) => {

    const file = new File([blob], fileName, {

        type: 'image/jpeg', // 这里的格式可以是jpg，png，gif，png等，都试了下，压缩大小不变

        lastModified: Date.now()

    });

    console.log(file);

}, 'image/jpeg', 10e-9); // 这里的10e-9很小了 极限0-1 0是最大压缩比率， 1这里有点玄学变大了 超过1 或者小于0 大小大概压缩了6成左右

#补充

这里看到一个兼容性的问题,主要考虑的Sarari IOS上，谁叫客户用呢？

// MDN给除了兼容代码，大体是是在Object原型添加了toBlob函数实现，粘贴添加就好

if (!HTMLCanvasElement.prototype.toBlob) {

  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {

    value: function (callback, type, quality) {

      var dataURL = this.toDataURL(type, quality).split(',')[1];

      setTimeout(function() {

        var binStr = atob( dataURL ),

            len = binStr.length,

            arr = new Uint8Array(len);

        for (var i = 0; i < len; i++ ) {

          arr[i] = binStr.charCodeAt(i);

        }

        callback( new Blob( [arr], {type: type || 'image/jpeg'} ) );

      });

    }

  });

}

#参考资料

MIME 类型

HTMLCanvasElement.toBlob()

FileReader

Canvas API

CanvasRenderingContext2D.drawImage()

查看原文