New course! Every coder should learn Generative AI!
Try a free lesson+ 1
How can i upload an image on a canvas with javascript?
10 Answers
+ 2
I want to make it so that when you click on the input button , it calls the upload function which allows you to pick an image in a folder and upload it on the canvas
+ 2
😃Thanks a lot. i tried it in codepen and it worked.
0
This is the HTML:
<body>
<div id="heading">
<h1>Upload an image</h1>
</div>
<div id="container">
<h1>Canvas</h1>
<canvas id="c1" class="canvas1">
</canvas>
<br/>
<input class="button" type="file" multiple="false"
accept="image/*" id="finput"
onclick="upload()" >
</div>
</body>
I just dont know which JS method to use to get an image I want to upload on the canvas.
Id really appreciate it if you could help me
0
I can't get the file to select, which might be a SoloLearn limitation. The JS should work.
https://code.sololearn.com/W1hhuR5fGR6O/?ref=app
0
Yeah I see you created an HTML element in JS.I wasnt aware you could do that.
Do just fill in the source of the image at img.src= ...?
- 1
JS can rewrite the HTML code so anything you can do there can be done in JS. I haven't played with uploaded images as yet so I don't know how to do that. If you can give me HTML for it, I can give you JS.
- 1
Cool.
- 1
Do you understand what I did?
- 1
yes. That is like saying <img src=x>
- 1
If you wish to change it, you just assign the new one.
Often have questions like this?
Learn more efficiently, for free:
Hot today
Html img
2 Votes
Popsicles
0 Votes
Where do i write my code?
0 Votes
When using boolean operators in python, what is the point of using Unicode or "ASCII" in a string?
1 Votes
I'm new in learning programming
0 Votes
Weird Floating Point operation
0 Votes
Web
1 Votes