我有两个 Kineticjs Canvas ，当尝试从另一个 Canvas 在一个 Canvas 中创建图像时，在使用新图像在 Canvas 上调用 toImage() 后出现此错误:
动态警告:无法获取数据 URL。无法在“HTMLCanvasElement”上执行“toDataURL”:受污染的 Canvas 可能无法导出
我很确定收到此错误的原因是因为“toImage()
方法要求图像托管在与执行它的代码具有相同域的 Web 服务器上。”如何绕过此警告，以便可以从一个 Canvas 创建对象并将它们添加到另一个 Canvas ？
我正在创建的应用程序将在本地运行，并且永远不会在线运行，因此我不必担心安全问题。我还读到，我可以启用跨源资源共享，但这似乎有点复杂，而且有点夸张，因为我认为它们需要设置一个网络服务器。
那么我可以做些什么来让一个 Canvas 能够在另一个 Canvas 上为 Chrome Kineticjs Web 应用程序创建图像吗？然后能够成功调用toImage()吗？
以下是我在 Canvas 中创建图像的方法:
var folderImage = new Image();
//folderImage.crossOrigin="anonymous"; // gives me file error if unchecked
folderImage.onload = function() {
var folderPic = new Kinetic.Image({
x: 0,
y: 0,
image: folderImage,
width: sideLen,
height: sideLen
});
subFolderGroup.add(folderPic);
subTextGroup.moveToTop();
mainBody4Dynamic.draw();
};
folderImage.src = 'assets/images/folder.png';
当我在另一层调用 toImage() 时，我调用的只是 layer.toImage()
最佳答案
浏览器将用户的本地驱动器视为其他域。这很好，因为您不希望浏览器对硬盘上的银行记录“变得友好”。
这意味着使用本地镜像在本地运行会污染 Canvas (违反 CORS)。
最简单的解决方法是在本地计算机上安装网络服务器，并将网页和图像托管在单个域上。 (=== 自动 CORS 合规性)。 PHP 和 IIS 在开发机器上都运行良好。
另一种解决方法是通过将图像托管在互联网镜像主机上来遵守 CORS 限制，该主机已将其服务器配置为在符合 CORS 的庄园中传送图像。然后您所要做的就是添加 myImage.crossOrigin="anonymous"。我相信 dropbox.com 会这样做——或者他们曾经这样做过。
在开发过程中，有时可以将 .html 和图像都放在桌面上。
关于javascript - KineticJS:动力学警告:无法获取数据 URL，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24440212/