1

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

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

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

带有 alpha 的图标

它是PNG中警告图标的裁剪图片。背景是阿尔法，它有一些黑色的图画。

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

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

4

1 回答 1

4

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

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; }
<img id="result"/>

于 2015-12-29T12:02:57.953 回答