javascript - 如何将使用 ImageService 提供的图像作为背景的 Canvas 元素转换为可下载图像？

Question

我正在编写一个应用程序，用户可以在其中上传图像、在其上绘图并保存结果。我试图通过使用 Canvas 元素并使用上传的图像作为背景来实现此目的。我正在通过 ImageService 检索图像。以下是初始化 Canvas 的客户端代码:

var image = new Image();
image.src = "http://some.google.domain.com/foobar123";
var ctx = canvas.getContext('2d')
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};

现在用户可以在图像上绘制内容。

然后当用户想要保存图像时，我调用:

canvas.toDataURL("image/png")

这会在 Chrome 中出现此错误:

Error: SecurityError: DOM Exception 18.
"Error: An attempt was made to break through the security policy of the user agent."

我假设 Chrome 不喜欢它，因为该图像是由某个 google 域提供的，该域与我的应用程序引擎应用的域不同。

有解决办法吗？

提前致谢。

Answer 1

作为解决方法，我现在使用 BlobstoreService 而不是 ImageService 来提供图像数据。这种方法提供与我的应用来自同一域的图像，但您会失去使用 Google 静态图像服务基础设施的所有优势。