Fabric.js 画布 toDataUrl

【问题标题】：Fabric.js canvas toDataUrlFabric.js 画布 toDataUrl
【发布时间】：2018-03-15 22:58:15
【问题描述】：

我在将面料的画布导出到 url 时遇到问题。

如何将所有带有 imes 的内容从画布导出到 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>

【问题讨论】：

标签： javascript html html5-canvas fabricjs

【解决方案1】：

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

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

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

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

              });

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

【讨论】：