Question

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

动态警告：无法获取数据网址。无法在'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';

当我在另一层调用imageI（）时，我调用的是layer.toImage()

Answer 1

浏览器将用户的本地驱动器视为其他域。这很好，因为你不想让你的浏览器“变得友好”＃34;将您的银行记录放在硬盘上。

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

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

另一种解决方法是通过在互联网成像主机上托管您的图像来遵守CORS限制，该主机已将其服务器配置为以CORS兼容庄园提供图像。然后，您只需添加myImage.crossOrigin="anonymous"即可。我相信dropbox.com可以做到这一点 - 或者他们曾经这样做过。

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

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

1 个答案: