Upload image to fabric

Question

hi im is trying to load an image and place it as a canvas background. code snippet:

function handleMenuImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.src = event.target.result; canvas.setWidth(img.width); canvas.setHeight(img.height); canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); //set the page background menuPages[currentPage].pageBackground.src = img.src; canvas.backgroundImageStretch = false; } reader.readAsDataURL(e.target.files[0]); } 

The problem is that the canvas does not show the background. I can see src canvas background in chrome devtools. the background is actually set, but somehow it is not displayed.

Answer 1

It seems weird confusing. If you want to get a background image in an HTMLCanvasElement, why not just set the background image using CSS?

 #myCanvas { background-image: url(http://placekitten.com/100/100); } 

Or set CSS via JavaScript:

 canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)'; 

Answer 2

Try using the following code:

 var raw_reader = new FileReader(); raw_reader.onload = function (event){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.src = event.target.result; canvas.setWidth(img.width); canvas.setHeight(img.height); canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas)); //set the page background menuPages[currentPage].pageBackground.src = img.src; canvas.backgroundImageStretch = false; } reader.readAsDataURL(e.target.files[0]); } raw_reader.readAsBinaryString(e.target.files[0]);