Fabric.js canvas toDataUrl

Question

我有导出结构的画布到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+'"/>'); 

       }); 

它不会工作，因为，图像来自不同的域。如果您的实际项目在同一个域上有图片，您可以尝试上面的代码。如果它来自不同的领域，那么你的逻辑将会变得更加复杂