如何将使用图像服务提供的图像作为背景的画布元素转换为可下载图像

How do I turn a canvas element that uses an image served by ImageService as background to a downloadable image?

本文关键字：图像 布元素 元素 转换 下载 服务 背景      更新时间：2023-09-26

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

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

有解决方法吗？

提前谢谢。

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

相关文章：