canvas标签导出图片时，设置图片背景为白色

业务需求：利用canvas标签签名，导出成图片；因为png格式的图片背景透明的，所以需要将背景图片设置为白色。可以寻找图片中透明的pixel，将其变为白色的。

this.ctx = this.ctx = this.canvas.getContext('2d');

// 获取图片数据
var imgData = this.ctx.getImageData(
        0,
        0,
        this.canvas.width,
        this.canvas.height
      );

for (var i = 0; i < imgData.data.length; i += 4) {
        // 当该像素是透明的,则设置成白色
    if (imgData.data[i + 3] == 0) {
        imgData.data[i] = 255;
        imgData.data[i + 1] = 255;
        imgData.data[i + 2] = 255;
        imgData.data[i + 3] = 255;
    }
}

//将图片信息重新复制到画布上
this.ctx.putImageData(imgData, 0, 0);

this.canvas.toBlob(function(e){
    //处理业务代码


})

toBlob介绍

转载于:https://www.cnblogs.com/qinmengjiao123-123/p/10300623.html