KineticJS：动力学警告：无法获取数据 URL

Question

我有两个 Kineticjs 画布，当尝试在一个画布中从另一个画布创建图像时，在使用新图像在画布上调用 toImage() 后出现此错误：

动力学警告：无法获取数据 URL。无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布

我很确定我收到此错误的原因是因为“toImage() 方法要求图像托管在与执行它的代码具有相同域的 Web 服务器上。”我怎样才能绕过这个警告，以便我可以从一个画布创建对象并将它们添加到另一个画布？

我正在创建的应用程序将在本地运行，并且永远不会在线运行，因此我不必担心安全问题。此外，我还阅读了有关我可以启用跨源资源共享的信息，但这似乎有点复杂且过于重要，因为我认为它们需要设置 Web 服务器。

那么我有什么技巧可以让一个画布能够在另一个画布中为 Chrome kineticjs 网络应用程序创建图像？然后能够成功调用toImage()？

这是我在画布中创建图像的方式：

  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

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

这意味着使用本地图像在本地运行会污染画布（违反 CORS）。

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

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

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