使用PNG + alpha通道绘制到JPEG dataUrl的画布

Question

我使用的是JS cropper库。裁剪完成后，裁剪器会生成画布，以便我可以获取数据并将裁剪的图片上传到我的服务器。

目前它工作正常但是在将画布转换为PNG数据网址时，因为我希望我的输出图片非常大（它是一个横幅），上传实际上需要花费很多时间所以我更喜欢使用JPEG似乎压缩了更好的大图片。但JPEG没有alpha通道，所以我似乎必须用背景替换它（我选择我的颜色：白色）。

所以，有人可以告诉我当原始图像是这样时，如何将该画布转换为JPEG格式的数据网址：

这是PNG中警告图标的裁剪图片。背景是alpha，它有一些黑色的图纸。

我做了一些尝试，但似乎当我在画布上绘制一个矩形时，它会绘制在我的初始图片之上。在添加图片之前我无法绘制矩形，因为cropper lib为我提供了已经构建的画布。

canvasToDataUrl(cropper) {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    return canvas.toDataURL("image/jpeg",1);
},

当我这样做时，我最后只得到一张白色的照片。

如果我不绘制矩形，我只是尝试转换为JPEG，那么我会得到一张黑色图片。

Answer 1

只需创建一个新画布，首先绘制背景颜色，然后绘制所需的画布图像：

＆＃13;

＆＃13;

function canvasToDataURL(canvas){
    // use cloneNode(true) to get the same width/height as your previous canvas
    var exporter = canvas.cloneNode(true);
    var ctx = exporter.getContext('2d');
    // first fill set our background
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,exporter.width, exporter.height);
    // yes you can draw a canvas onto a canvas
    ctx.drawImage(canvas, 0,0);
    var dataURL = exporter.toDataURL('image/jpeg');
    return dataURL;
}

// simulate the cropper canvas
var cropper = document.createElement('canvas');
var img = new Image();
img.onload = function(){
  cropper.width = this.width/2;
  cropper.height = this.height/2;
  cropper.getContext('2d').drawImage(this, 0,0);
  // here we pass the canvas, not the img
  result.src = canvasToDataURL(cropper);
  }
img.crossOrigin = 'anonymous';
img.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";

＆＃13;

body { background-color: ivory; }

＆＃13;

<img id="result"/>

＆＃13;

＆＃13;

＆＃13;