javascript - kineticjs画布到本地html页面上的图像

Question

我正在尝试以与本教程中类似的方式生成我的 kineticjs 画布的图像。（虽然与示例不同，我的画布确实包含来自本地子目录的图像。）

但是，我知道以下几点：

toDataURL() 方法要求绘制到画布上的任何图像都托管在与执行它的代码具有相同域的 Web 服务器上。如果不满足此条件，则会引发 SECURITY_ERR 异常。

但是，我需要能够在本地 html 页面上生成图像。无论如何，是否可以使用toDataURL或任何其他图像生成方法来解决上述安全要求？

score 1 · Accepted Answer

您可以使用从网络上获得的任何图像作为 Kinetic.Image 的来源。

因此，您可以在本地 html 页面上显示该图像。

然后您不能做的是将该网页导出为带有 toDataURL 的图像。

您也无法使用 context.getImageData 检查像素数组。

如果您只是绘制矩形/圆形/等，但没有外部图像，那么您很好。

如果您下载 Web 图像并将其保存在本地驱动器上，则该图像仍然是“脏的”并且会导致安全错误——即使它现在在您的本地计算机上。

解决方法：

这有时有效：

从 Web 获取图像，在 Photoshop 中对其进行修改，并将其另存为新文件，并将其保存到与将使用该文件的 .html 文件相同的目录中。 这通常会从图像中删除“脏”标志。

或者，您可以在本地计算机上安装 Web 服务器（这些天没什么大不了的）。我在考虑 IIS 或 WAMP。

如果您愿意避免使用 Internet Explorer，则可以将图像托管在允许跨域访问图像的站点上。dropbox.com 就是这样一个托管站点。然后，您可以加载您的图像，并将 crossOrigin 标志设置为“匿名”，并且生成的图像不会是“脏”的。

var img=new Image();
img.onload= ...
img.crossOrigin="anonymous";
img.src="yourDropboxImage.png";

1 回答 1