fabric.js - toDataURL在画布上有图像时显示空白页面

Question

我正在使用fabric.js作为我的canvas应用程序,toDataURL方法正常工作,除非画布上有图像.当我将图像添加到画布并调用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 dev控制台,但在.js文件中不起作用,即使它是相同的代码.我注意到工作数据网址以'=='结束,但其他网址没有.但是我不知道这意味着什么.

Answer 1

你没有给分析太多,但我会从那里看到我的直觉.

您正在使用的映像可能违反了跨源资源共享(CORS)要求.当发生这种情况时,当您尝试使用canvas.toDataURL()或获取像素数据时,画布将返回空白图像context.getImageData().

它基本上发生在图像与页面不在同一域中或从file://协议加载时.

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

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

来自标签:

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

这将请求服务器允许使用图像跨源.如果服务器允许你应该没事.

如果不是,您将不得不将图像复制到您自己的服务器,以便从与您的页面相同的域加载,或者创建一个代理页面,从外部加载图像并从代理页面将其提供给您的页面(听起来很复杂但是真的不是).

如果图像在画布上根本没有显示,则可能没有使用所需的加载回调,因为图像加载是异步的.如果是这样,请添加:

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

Answer 2

问题已经解决了.我错过的一点是,我在加载画布之前调用了toDataURL函数,这就是为什么它向我展示了一个空白页面.

canvas.loadFromJSON(json,function(){
          var dataURL = canvas.toDataURL();
          });

当我将toDataURL()函数作为loadFromJSON函数的回调函数时,这解决了我的问题.

但过了一段时间我有一个关于CORS的不同问题,当我试图从s3桶上传我的图像时,我解决了这个问题作为向上解决方案.