Fabric.js画布toDataUrl [英] Fabric.js canvas toDataUrl

问题描述

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

I have a problem with export fabric's canvas to url.

如何将所有包含imes的内容从画布导出到url?因为现在，我可以看到只导出了红色背景.

How can I export all content with imes from canvas to url? Because for now, I can see that only red background has been exported.

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

Here's my fiddle : 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>

推荐答案

您的结果正确.在加载图像之前，您正在获取画布数据.加载图像是异步的.如果您愿意这样做(使用小提琴):

Your result is correct. You are getting canvas data before image is loaded. Loading images are async. If you will do like this (using your fiddle):

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

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

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

              });

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

It will not work because, image is from different domain. If your actual project has images on the same domain you can try code above. If it is from different domain, so it will be more complicated to do then your logic

这篇关于Fabric.js画布toDataUrl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！