3

我在我的画布应用程序中使用了 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 以 '==' 结尾，但另一个不是。但是我不知道这意味着什么。

4

3 回答 3

5

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

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

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

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

于 2013-10-16T10:01:13.713 回答
4

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

您使用的图像可能违反了跨域资源共享(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-13T07:09:58.400 回答
0

当我尝试使用 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();

以下是片段

$("#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');
         
      }
  });
});
于 2021-05-28T20:57:50.817 回答