如何使用canvas压缩图片

2017/12/20 15:05:00

为什么需要压缩？

我们在项目中有时候会遇到需要用户上传身份证照或者头像照片，而现在市面上的手机像素普遍都很高，拍出来的照片普遍都有3MB以上甚至更大，如果同时上传几张图片就会导致页面卡住，所以我们需要对上传的图片进行压缩，下面就让我给大家讲一下如何使用canvas压缩图片。

FileReader

首先向大家介绍一下FileReader，FileReader是HTML5用来读取文件的API，可以将上传的文件读取为 DataURL。
使用也非常简单，按照以下步骤就可以调用其方法：

html:
  <input type="file" id="uploadFile" name="uploadFile" onchange="getFileInfo()">

js:
function getFileInfo() {
  var files = document.getElementById('uploadFile').files,
      reader = new FileReader();

  reader.onload = function(e) {
    console.log(e.target.result);
  }

  reader.readAsDataURL(files[0])
}

这里的 e.target.result 就是上传文件的baseURL了

获取上传图片的宽度和高度

使用canvas进行图片压缩的时候主要利用canvas的drawImage和toDataURL两个方法实现，需要设置绘制图片的大小，因此，我们需要先获取上传图片的宽度和高度:

..
var img = document.createElement('img'),
    imgWidth,
    imgHeight;

img.src = e.target.result;             // 此处e.target.result为上面获取到的baseURL
img.onload = function() {
  imgWidth = this.width;
  imgHeight = this.height;
}

canvas压缩

..
var cc = document.createElement('canvas'),
    ctx = cc.getContext('2d');

ctx.drawImage(img, 0, 0, imgWidth, imgHeight);        // img,imgWidth,imgHeight都是上面获取到的数据
baseURL = cc.toDataURL('image/jpeg', 0.8);

如何使用toDataURL进行压缩第一个参数目前仅支持’image/jpeg’, 第二个参数是图片的质量，0.8为原来图片大小的0.8倍，最后获取到的 baseURL 就是我们压缩后的图片baseURL了，如果压缩到原来的80%大小还是不够我们可以通过缩小图片的大小后进行压缩。

另外完整的代码我已经上传到我的github上了，文章有什么不明白的可以去看看demo。