javascript - fabric.js - toDataURL 在 Canvas 上有图像时显示空白页

Question

我正在为我的 Canvas 应用程序使用 fabric.js，toDataURL 方法可以正常工作，除非 Canvas 上有图像。当我将图像添加到 Canvas 并调用 toDataURL 时，它会显示一个空白页面。

//When i call it from chrome console
canvas.toDataURL();
//It returns a working data url with no problem.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAgAElEQ…fpmwgogX1TrjoqP0FACewngtZh+iYCSmDflKuOyk8Q+H+CKCqUW0spTgAAAABJRU5ErkJggg=="

//When i execute same code in a .js file it returns a data url which shows a blank image.
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAGkCAYAAAAPPajHAAAKC0lEQ…sBAmEBAw6XJzoBA/YDBMICBhwuT3QCBuwHCIQFDDhcnugEHt/IAaW9dzALAAAAAElFTkSuQmCC"

有趣的是，它在 chrome 开发控制台上工作，但在 .js 文件中不起作用，即使它是相同的代码。我注意到工作数据 url 以“==”结尾，而其他则没有。但是我不知道这意味着什么。

Answer 1

您没有给出太多分析，但我会根据直觉从那里开始。

您使用的图像可能违反了 Cross-Origin Resource Sharing (CORS) 要求。如果发生这种情况，当您尝试使用 canvas.toDataURL() 或 context.getImageData() 获取像素数据时， Canvas 将返回空白图像。

当图像与页面不在同一域或从 file://协议(protocol)加载时，基本上会发生这种情况。

您可以尝试在设置源之前将以下内容添加到图像对象中:

image.crossOrigin = 'anonymous';
image.src = '...';

来自标签:

<img crossOrigin='anonymous' src='...' alt='' />

这将请求服务器允许使用图像跨源。如果服务器允许，您应该没问题。

否则，您要么必须将图像复制到您自己的服务器，以便它从与您的页面相同的域加载，要么创建一个代理页面，从外部加载图像并从代理页面将其提供给您的页面(它听起来很复杂，但实际上并不复杂)。

如果图像根本没有显示在 Canvas 上，您可能没有使用所需的加载回调，因为图像加载是异步的。如果是这样，只需添加:

image.onload = function() {
    /// now you can draw the image to canvas
}
image.crossOrigin = 'anonymous';
image.src = '...';