1

I am having trouble trying to resize the uploaded image on to my html for project. When I searched for a solution. The site https://www.w3schools.com/tags/canvas_drawimage.asp gave me an idea but I can't seem to wrap my head about the script. Am I misunderstanding something about the script?

<javascript>    
function uploadForegroundImage(){
fileInput = document.getElementById("foregroundImageUpload");
image = new Image(fileInput);
image.onload = function() {
   var c = document.getElementById("foregroundImageCanvas");
   var ctx = c.getContext("2d");
   var img = document.getElementById(fileInput);
   ctx.drawImage(img, 10, 10, 600, 400);
  }
 }
</javascript>
Sebastien
  • 45
  • 1
  • 7
  • Does this answer your question? [Can I load a local file into an html canvas element?](https://stackoverflow.com/questions/13938686/can-i-load-a-local-file-into-an-html-canvas-element) – Marco May 21 '20 at 00:12
  • @marco-a not really because I don't understand half of it. – Sebastien May 21 '20 at 00:26
  • i am doing a course online and they didn't teach how to resize the image when loading the image. when I create the site. the images would be too big for the canvas. – Sebastien May 21 '20 at 00:28
  • hey! i found out the issue. its was in the .css. I have to added height in my canvas. – Sebastien May 21 '20 at 04:07

1 Answers1

0

The code provided should work. If you are getting an error, make sure to load it from a URL that you have access to, or select it using an HTML input tag. Also I'm not aware of a "javascript" tag, it should be changed to "script"

B''H Bi'ezras -- Boruch Hashem
  • 3,665
  • 3
  • 33
  • 83
  • I am not getting and error because I am using atom ide. so it is hard to tell if I am getting and error. I am reading something that some browser can not work properly for canvas? – Sebastien May 21 '20 at 00:32
  • @Sebastien iif its in the local filestream, you need to either make a local server on your comptuer or load the image with then listen for the onchange event, then make a URL.createObjectURL for event.target.files[0], and fetch that URL (with blob response) to get the image data, – B''H Bi'ezras -- Boruch Hashem May 21 '20 at 01:23