0

I try to upload and draw an image into a canvas. I have the html code for button and canvas and js code for onchange event. My code does not work and I do not have any errors to figure out what is going on.

Aria
  • 45
  • 1
  • 8
  • What are you expecting as a result, i tried it and the image is being loaded inside the canvas. Can you specify more details 'on what is not working' ? – hd84335 Jan 03 '18 at 10:29
  • I have the same code but in separated files for js and html (same folder). I link them with , and nothig happens with my image loader – Aria Jan 03 '18 at 10:55
  • Are you adding the script tag in the `` ? – hd84335 Jan 03 '18 at 11:32
  • you must add it at the end of the body, otherwise it won't work. can you open the browser console and check if there is any error in the logs ? – hd84335 Jan 03 '18 at 11:35
  • Add this `` before the body closing tag – hd84335 Jan 03 '18 at 14:25
  • Yes, the script tag is in the head tag and I tried to put the code in the html file and it work ( script tag type="text/javascript") – Aria Jan 03 '18 at 14:29
  • So it's fine now ? If any suspicion, check it here https://embed.plnkr.co/HjeuLH9WzL0IFj1ZEIBw/. – hd84335 Jan 03 '18 at 14:32
  • Finally it works!! Thanks a lot! The solution is to " Add this before the body closing tag

    "

     – Aria Jan 03 '18 at 14:33

1 Answers1

1

The fix is by simply including your scripts at the end of the body before the closing tag </body>.

Your html code will appear like this:

<html>
<body>
    <div id="buttonsDiv" >
        <input type="file" accept="image/*" title="Upload Image" class="normal-button" id="uploadBtn"/>            
    </div>
    <canvas id= "myImgCanvas" title="Drop an image here to upload" ></canvas>

    <script src="myFileName.js"></script>
</body>
</html>

Note that you must pay attention when you should/ should not include your scripts in the <head> tag vs including it at the end of the </body> tag. You can check this post for the best practice.

hd84335
  • 8,815
  • 5
  • 34
  • 45