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

您可能会遇到安全错误，这是因为将源跨域的图片绘制到画布上。在任何画布上绘制跨域图像都会“污染”＃34;如果您尝试执行context.toDataURL，则该画布并禁用toDataURL并引发安全性错误。同样的污点＆＃34;如果您将受污染的画布绘制到未污染的画布上，将会发生。

修复方法是确保您在画布上绘制的所有图像都与您的网页位于同一个域中。

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

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

满足跨源安全限制

您可以将图像托管在已允许跨域访问其图像的服务器上。这就是我在上面的例子中所做的。 Dropbox.com允许您指定它所托管的图像可以被绘制到画布而不会出现＆＃34;污染＆＃34;画布。

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

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

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

1 个答案: