fabric.js - 当画布上有图像时，toDataURL 显示空白页面答案

【问题标题】：fabric.js - toDataURL shows blank page when there is image on canvasfabric.js - 当画布上有图像时，toDataURL 显示空白页面
【发布时间】：2013-10-20 23:37:45
【问题描述】：

我将 fabric.js 用于我的画布应用程序，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 开发控制台上运行，但不能在 .js 文件中运行，即使它是相同的代码。我注意到工作数据 url 以 '==' 结尾，但另一个不是。但是我不知道这意味着什么。

【问题讨论】：

标签： javascript html canvas html5-canvas fabricjs

【解决方案1】：

当我尝试使用 Fabricsjs 从画布生成图像并使用 JSPDF 从图像生成 PDF 时，我遇到了同样的问题，所以下面是我的案例，我也花了几个小时在这上面可能会帮助别人节省时间。

从 JSON 加载画布，即

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(obj, object) {
    //fabric.log(obj, object);
});

画布绘制图像一切正常，然后我从该画布生成图像，这是单个画布中多个图像的情况，我根据画布的每个页面生成 PDF。

不是这个

canvas.toDataURL('image/png', 0.1)

我使用了它，它开始向我返回propper images dataurl

var imgData = document.getElementById('canvas_0').toDataURL();

下面是sn-ps

$("#pdfSelector .canvas-container").each(function(index, value){ // canvas selector
  html2canvas($("#canvas_"+index), {   // html2canvas used to get images
      onrendered: function(canvas) {   // on successfully render of images 
          //var imgData =  canvas.toDataURL('image/png', 0.1);
          var imgData = document.getElementById('canvas_0').toDataURL();
          const imgProps= doc.getImageProperties(imgData);
          const pdfWidth = doc.internal.pageSize.getWidth();
          const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
          
          doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight, 'page_'+index, 'FAST');
         
      }
  });
});

【讨论】：

【解决方案2】：

问题解决了。我错过的一点是，我在加载画布之前调用了 toDataURL 函数，这就是它向我显示空白页的原因。

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

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

但是过了一段时间，当我尝试从 s3 存储桶上传我的图像时，我遇到了一个关于 CORS 的不同问题，我将这个问题作为向上的解决方案解决了。

【讨论】：

有道理，这也解决了我的问题。很高兴我在用 S3 将更多的头发从 CORS 的东西上拉出来之前看到了你的回答！

【解决方案3】：

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

您使用的图像可能违反了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 = '...';

【讨论】：