Question

我目前正在处理一个阶段的层，该阶段在按钮事件中导出到png文件，它正在工作，但直到我将一个Logo作为Image类添加到图层。

不添加Image元素：

layer.toImage({
   callback: function(img) { //img = "base_64 image data".
     console.log(img.src);
   }
});

使用Image元素：

layer.toImage({
   callback: function(img) { //img = null
     console.log(img.src); // Error: src of null.
   }
});

在这里，应用程序崩溃，我找不到问题。我试图添加和删除图像，然后导出图像，完美地工作。我只在图层中绘制图像元素时遇到此问题。

为什么会发生这种情况？

更新

代码示例：

var myLayer= this.refs.layer;
myLayer.children.forEach(element => {
  if (element.attrs.elementType === "text"){
    if (element.isVisible()){
      element.visible(false);
      hiddenElements.push(element.id);
    }
  }
});

myLayer.toImage({
  callback: function(img) { //If image is drawn to the leyer img = null
    *Ajax function here*    //Else img has base64 info of the leyer
  },
  mimeType: "image/png"
});

然后我将所有hiddenElements设置为true，然后舞台恢复到初始状态。

Answer 1

对于其他任何人来到这里并想知道'CORS'，Wikipedia introduces CORS为

跨域资源共享（CORS）是一种允许的机制要请求的网页上的受限资源（例如字体）第一个资源所在的域外的另一个域提供服务。网页可以自由嵌入跨源图像，样式表，脚本，iframe和视频。某些“跨域” 请求，尤其是Ajax请求，默认情况下是被禁止的同源安全政策。

这在实践中意味着画布无法将图像从另一个（未启用CORS的）域处理为blob。如果它尝试浏览器将强制您在浏览器控制台中观察到“Tainted canvas”错误。

在Mike C this SO question的回复中有一个简洁的解释为什么会这样，为了简洁起见，我将在此处复制。

想象一下，您的银行对帐单已打开，只有您可以查看因为某种身份验证标题，但后来是第三方创建一个canvas元素并将该图像插入到画布中。他们然后可以将其转换为blob并将其发送回home base 画布没有标记为“污染”

事实证明，帆布的好处也是潜在的陷阱。或者正如尤达可能会说'强大的你已成为，我感觉到的黑暗面。'

Konvajs - Layer.toImage（）返回null而不是图像数据

1 个答案: