Skip to content Skip to sidebar Skip to footer

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 export

Solution 1:

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

Post a Comment for "Fabric.js Canvas Todataurl"