带有PNG + alpha通道的画布到JPEG dataUrl答案

【问题标题】：Canvas with PNG + alpha channel to JPEG dataUrl带有PNG + alpha通道的画布到JPEG dataUrl
【发布时间】：2016-04-03 04:41:07
【问题描述】：

我正在使用 JS 裁剪库。裁剪完成后，裁剪器会为我提供一个画布，以便我可以获取数据并将裁剪后的图片上传到我的服务器。

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

那么，当原始图像如下时，有人可以告诉我如何将该画布转换为 JPEG 中的数据 url：

这是一张PNG警告图标的裁剪图片。背景是 alpha 并且有一些黑色绘图。

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

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，那么我会得到一张黑色图片。

【问题讨论】：

标签： html canvas data-uri todataurl

【解决方案1】：

只需创建一个新的画布，您首先在其中绘制背景颜色，然后绘制想要的画布图像：

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";

body { background-color: ivory; }

&lt;img id="result"/&gt;

【讨论】：