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

我正在尝试将两个 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 中运行良好 - 在其他浏览器中我无法设置文件名并设置文件扩展名。）

您可能遇到安全错误由于将来源跨域的图像绘制到画布上而引起。在任何画布上绘制跨域图像都会“污染”该画布并禁止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 http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

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