Question

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

Answer 1

你没有给予太多的分析，但我会从那里直接感受到。

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

当图像与页面不在同一个域中或从file：// protocol加载时，基本上会发生这种情况。

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

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桶上传我的图像时，我解决了这个问题作为向上解决方案。

Answer 3

当我尝试使用 Fabricsjs 从画布生成图像并使用 JSPDF 从图像生成 PDF 时，我遇到了同样的问题，所以下面是我的情况，我也在这上面花费了数小时，这可以帮助某人节省时间。

>

从 JSON 加载画布，即

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

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

代替这个

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

我使用了它，它开始向我返回正确的图像数据网址

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

以下是片段

$("#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');
         
      }
  });
});

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

3 个答案: