CODEWITHSUNDEEP
javascripthtmlhtml5-canvasfabricjs
Logan 03
Logan 03

Reputation: 45

Fabric.js canvas toDataUrl

I have a problem with export fabric's canvas to 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.

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>

Upvotes: 3

Views: 9317

Answers (1)

Observer
Observer

Reputation: 3706

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

Upvotes: 4

Related Questions