canvas图片压缩

发表于 分类于 阅读次数：

canvas生成图片的方法，我们通过官方教程都能简单的生成，但是我遇到的情况是，在生成的过程中，图片有点大，其实图片大也没什么问题，但是要知道图片大的话上传是比较消耗时间和流量的，所以对于大尺寸的图片还是要进行下压缩比较好

正常生成图片我们可以配置参数

1
canvas.toDataURL("image/jpeg", quality);

image/jpeg

可以替换为 image/png 或者 image/webp

不过 image/webp 格式的话ios好像默认情况下是不支持的

quality 是一个0-1的值，具体值为多少可以根据情况来设定

有了上面的方法我们就可以根据这个思路进行压缩，方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/**
 * @param base64 为64位编码的图片数据
 * @param w 要压缩的图片的宽度
 * @param calback 回掉函数
 */
function dealImage (base64, w, callback) {
  var newImage = new Image();
  var quality = 1; //压缩系数0-1之间
  newImage.src = base64;
  newImage.setAttribute("crossOrigin", 'Anonymous'); // url为外域时需要
  var imgWidth, imgHeight;
  newImage.onload = function () {
    imgWidth = this.width;
    imgHeight = this.height;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    if (Math.max(imgWidth, imgHeight) > w) {
      if (imgWidth > imgHeight) {
        canvas.width = w;
        canvas.height = w * imgHeight / imgWidth;
      } else {
        canvas.height = w;
        canvas.width = w * imgWidth / imgHeight;
      }
    } else {
      canvas.width = imgWidth;
      canvas.height = imgHeight;
      quality = 1;
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句

    callback(base64);
  }
}