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

对于我的画布应用程序，我正在使用fabric.js，除了在画布上存在图像时，toDataURL方法正常工作。当我将图像添加到画布并调用toDataURL时，它会显示一个空白页面。fabric.js - 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完成'=='，但其他人没有。但我不知道这是什么意思。

来源

2013-10-13 Yusuf Can Gürkan

你没有太多的分析，但我会从我的直觉去那里。

您正在使用的图像可能违反了Cross-Origin Resource Sharing（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 = '...';

来源

2013-10-13 07:09:58 K3N

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

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

这解决了我的问题，当我给toDataURL（）函数作为loadFromJSON函数的回调。

但过了一段时间，我有一个关于CORS的不同的问题，当我试图从s3桶上传我的图像时，我解决了这个问题，因为它解决了上行问题。

来源

2013-10-16 10:01:13

有道理，这也解决了我的问题。很高兴我看到你的答案，然后用S3将我的头发拉出CORS的东西！ – teewuane

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

回答

相关问题