Fabric.js画布转换为DataUrl

Question

我有一个导出织物画布到URL的问题。

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

- Logan 03

Answer 1

你的结果是正确的。你在加载图片之前获取了画布数据，而图片加载是异步的。如果你按照以下方式操作（使用你的代码）：

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

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

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

              });

由于图片来自不同的域，所以它不起作用。如果您的实际项目在同一个域上有图像，您可以尝试上面的代码。如果来自不同的域，则执行会更加复杂，超出您的逻辑范围。

- Observer