【canvas】导出图片背景色

一般是透明底或者黑色，想要白色背景的图片。

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

完整代码

rotate90(imgUrl, imgW, imgH, deg) {
            let that = this;
            var Img = new Image(),
                dataURL = "",
                deg = deg;
            Img.src = imgUrl;
            Img.onload = function() {
                var canvas = document.createElement("canvas"), //创建canvas元素
                    ctx = canvas.getContext("2d"),
                    //确保canvas的尺寸和图片一样
                    width = imgW,
                    height = imgH,
                    w = deg % 180 == 0 ? width : height,
                    h = deg % 180 == 0 ? height : width,
                    obj = {
                        x: w / 2,
                        y: h / 2,
                        w: width,
                        h: height
                    };
                canvas.width = w;
                canvas.height = h;

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

                ctx.translate(obj.x, obj.y);
                ctx.rotate((deg * Math.PI) / 180);
                ctx.translate(-obj.x, -obj.y);

                ctx.drawImage(
                    Img,
                    obj.x - obj.w / 2,
                    obj.y - obj.h / 2,
                    obj.w,
                    obj.h
                ); //将图片绘制到canvas中
                dataURL = canvas.toDataURL(); //转换图片为dataURL（转换成base64）
                console.log(dataURL);
                that.$emit("getSign", dataURL);
                that.switchPlay(); // 确定 返回表单页
            };
        }