合并多个画布并下载为图像

Question

我正在尝试将两个 HTML 画布合并到一个画布中，然后将其作为图像下载。我的代码如下：

function downloadCanvas() {
    var bottleCanvas = document.getElementById('bottleCanvas');
    var designCanvas = document.getElementById('editorCanvas');

    var bottleContext = bottleCanvas.getContext('2d');
    bottleContext.drawImage(designCanvas, 69, 50);

    var dataURL = bottleCanvas.toDataURL("image/png");
    var link = document.createElement('a');
    link.download = "bottle-design.png";
    link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    link.click();
}

我的问题似乎是以下行：

bottleContext.drawImage(designCanvas, 69, 50);

这应该将一个画布的内容绘制到另一个画布上，它确实这样做了，但随后会阻止代码的后半部分运行和下载图像。当我删除此特定行时，下载功能可以正常工作，但不幸的是只下载其中一个画布。

因此，我的问题是：我在这里做错了什么？或如何合并两个 HTML 画布，然后将其下载为图像。

（另一方面，我上面的下载代码只在 Chrome 中运行良好 - 在其他浏览器中我无法设置文件名和文件扩展名。）

Answer 1

您可能会遇到安全错误，这是由于在画布上绘制来源跨域的图像而导致的。在任何画布上绘制跨域图像将“污染”该画布并禁止context.toDataURL，如果您尝试执行toDataURL，则会引发安全错误。如果将受污染的画布绘制到未受污染的画布上，也会发生同样的“污染”。

解决方法是确保您在画布上绘制的所有图像都来自与您的网页相同的域。

以下是您的代码在使用不会引发跨域安全错误的图像时正常工作的示例：

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/fish.jpg";
function start(){

  var bottleCanvas = document.getElementById('bottleCanvas');
  var designCanvas = document.getElementById('editorCanvas');
  var ctxb=bottleCanvas.getContext('2d');
  var ctxd=editorCanvas.getContext('2d');

  ctxb.drawImage(img,0,0);
  ctxd.fillRect(50,50,50,50);

  downloadCanvas();
}

function downloadCanvas() {
  var bottleCanvas = document.getElementById('bottleCanvas');
  var designCanvas = document.getElementById('editorCanvas');

  var bottleContext = bottleCanvas.getContext('2d');
  bottleContext.drawImage(designCanvas, 69, 50);

  var dataURL = bottleCanvas.toDataURL("image/png");
  var link = document.createElement('a');
  link.download = "bottle-design.png";
  link.href = bottleCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  link.click();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<canvas id="bottleCanvas" width=300 height=300></canvas>
<canvas id="editorCanvas" width=300 height=300></canvas>

满足跨域安全限制

您可以将图像托管在已经允许跨域访问其图像的服务器上。这就是我在上面的示例中所做的。 Dropbox.com 允许您指定其托管的图像可以绘制到画布上，而不会“污染”该画布。

您还可以配置您的 S3 存储桶以允许跨域访问您的图像。此链接提供有关如何将响应标头设置为服务器跨域图像的说明：http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

请注意，在我的示例中，如果您使用的是跨域图像，您还必须在最初在 javascript 中创建图像对象时设置 image.crossOrigin='anonymous' 标志。