+ 1

How can i upload an image on a canvas with javascript?

16th Nov 2017, 12:07 PM
junaid
junaid - avatar
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
16th Nov 2017, 12:31 PM
junaid
junaid - avatar
+ 2
šŸ˜ƒThanks a lot. i tried it in codepen and it worked.
16th Nov 2017, 1:06 PM
junaid
junaid - avatar
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
16th Nov 2017, 12:27 PM
junaid
junaid - avatar
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
16th Nov 2017, 1:00 PM
John Wells
John Wells - avatar
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= ...?
17th Nov 2017, 11:52 AM
junaid
junaid - avatar
- 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.
16th Nov 2017, 12:22 PM
John Wells
John Wells - avatar
- 1
Cool.
16th Nov 2017, 1:07 PM
John Wells
John Wells - avatar
- 1
Do you understand what I did?
16th Nov 2017, 1:37 PM
John Wells
John Wells - avatar
- 1
yes. That is like saying <img src=x>
17th Nov 2017, 12:11 PM
John Wells
John Wells - avatar
- 1
If you wish to change it, you just assign the new one.
17th Nov 2017, 12:12 PM
John Wells
John Wells - avatar