Question

导出fabric的canvas到url时遇到问题。

如何将带有imes的所有内容从canvas导出到url？因为现在，我可以看到只导出了红色背景。

这是我的小提琴：https://jsfiddle.net/y7pu4wn3/13/

<div id="custom-label" style="position: absolute; right: 0px; top: 50px; z-index:10; width: 512px; height: 256px; border: 1px solid #7d8d20">
  <canvas id="draw-area" width="512" height="256" style=""></canvas>
</div>

Answer 1

你的结果是对的。在加载图像之前，您将获得画布数据。加载图像是异步的。如果你这样做（使用你的小提琴）：

fabric.Image.fromURL(imageObj.src, function(myImg) {
                canvas.add(myImg); 

                var pngURL = canvas.toDataURL();
                console.log(pngURL);

                $('#placeHolder').html('<img src="'+pngURL+'"/>');

              });

它不起作用，因为，图像来自不同的域。如果您的实际项目在同一个域中有图像，您可以尝试上面的代码。如果它来自不同的域，那么做你的逻辑会更复杂

Fabric.js canvas toDataUrl

1 个答案: