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

Question

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

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 不喜欢它，因为图像是从某个谷歌域提供的，这与我的应用引擎应用程序的域不同。

有解决办法吗？

提前致谢。

Answer 1

作为一种解决方法，我现在使用 BlobstoreService 来提供图像数据，而不是 ImageService。这种方法提供与我的应用程序相同域的图像，但是您失去了使用 Google 的静态图像服务基础架构的所有好处。