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

我正试图以类似的方式生成我的kineticjs画布的图像，它是如何在中完成的。（尽管与示例不同，我的画布确实包含来自本地子目录的图像。）

然而，我知道以下几点：

toDataURL（）方法要求绘制到画布上的任何图像都托管在web服务器上，该服务器的域与执行它的代码的域相同。如果不满足此条件，将引发安全错误异常

---

但是，我要求能够在本地html页面上生成图像。是否可以使用

toDataURL

或任何其他图像生成方法来解决上述安全要求？

您可以使用从web获得的任何图像作为Kinetic.image的源。

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

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

也无法使用context.getImageData检查像素阵列

如果你只是画矩形/圆形/等等，但没有外部图像，那么你就很好了

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

解决方法：

这有时有效：

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

或者，您可以在本地计算机上安装web服务器（现在没什么大不了的）。我在想IIS或WAMP

如果您不想使用Internet Explorer，您可以在允许跨源访问图像的站点上托管图像。dropbox.com就是这样一个托管网站。然后，您可以将crossOrigin标志设置为“匿名”来加载图像，结果图像将不会“脏”

---

这实际上是为了分配任务，所以我必须发回一个带有工作演示的zip，这样就不可能将图像推送到服务器，并且将图像放在同一个目录中会破坏我的目录层次结构。如果您试图

toDataURL

或

getImageData

包含“脏”标记图像的画布，你的答案是…你不能。如果您的演示用户可以访问internet，请参阅我编辑的答案，了解更多可能性。

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