Rendering image Blob file in canvas ! | Sololearn: Learn to code for FREE!

+17

Rendering image Blob file in canvas !

I was trying to take user input of image and display ot to canvas but I am not able to do it. see my try 👇 Please tell me the solution. https://code.sololearn.com/Wvy83fqvrS02/?ref=app

9/22/2021 4:05:40 PM

丹ⓨㄩک廾 [ Less Active ]

6 Answers

New Answer

+6

You have to wait for the image to load before embedding it into the canvas. img.onload = function(){ ctx.drawImage(img,0,0,400,400); in_im.remove(); } https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#creating_an_image_from_scratch https://code.sololearn.com/WUmPMmQZ9N7s

+5

丹ⓨㄩک廾 i think so u should try to append in_im and remove when clicked edit: without appending it won't work so try this document.body.append(in_im) in_im.click(); document.body.remove(in_im )

+4

https://stackoverflow.com/questions/10209227/open-local-image-in-canvas I have recently used this

+3

That's not the actual problem. See the problem is to create image on canvas taking it from devise Time Is Money

+3

Just to make a little correction to ODLNT answer. You're not "Embedding" an image into the canvas, instead the rendering context goes through a rasterisation algorithm then "render" the sequential pixels at a specific location on the canvas. This process is known as "rasterisation" other than "embed system" or "encapsulation"

+1