javascript - KineticJS:动力学警告:无法获取数据 URL

Question

我有两个 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()

Answer 1

浏览器将用户的本地驱动器视为其他域。这很好，因为您不希望浏览器对硬盘上的银行记录“变得友好”。

这意味着使用本地镜像在本地运行会污染 Canvas (违反 CORS)。

最简单的解决方法是在本地计算机上安装网络服务器，并将网页和图像托管在单个域上。 (=== 自动 CORS 合规性)。 PHP 和 IIS 在开发机器上都运行良好。

另一种解决方法是通过将图像托管在互联网镜像主机上来遵守 CORS 限制，该主机已将其服务器配置为在符合 CORS 的庄园中传送图像。然后您所要做的就是添加 myImage.crossOrigin="anonymous"。我相信 dropbox.com 会这样做——或者他们曾经这样做过。

在开发过程中，有时可以将 .html 和图像都放在桌面上。