How to change the width and height of an image JavaScript

Question

I have this code to add an image in my website but I want to resize it

 var questionHeader = document.getElementById("a");
 var img = new Image(),
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

  img.onload = () => {
    let width = Math.floor(img.naturalWidth * 0.1),
      height = Math.floor(img.naturalHeight * 0.1);
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
  };
  img.src = "https://cdn-icons-png.flaticon.com/512/7951/7951990.png";

  questionHeader.appendChild(img);

<div id="a"></div>

With this code I want to make the image smaller

  let width = Math.floor(img.naturalWidth * 0.1),
      height = Math.floor(img.naturalHeight * 0.1);
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);

For some reason it's not working though. Anyone knows what the problem may be?

You are appending the original image to your document, and not the canvas element that you actually drew the resized image onto. — C3roe
– C3roe, Commented Aug 1, 2022 at 10:43
And by the way wasn’t better to just create an img element? — Diego D
– Diego D, Commented Aug 1, 2022 at 10:44

Mohamad dorqi · Accepted Answer · 2022-08-01 10:40:32Z

2

You can resize img by css class and you can set class for img with JavaScript by classname

answered Aug 1, 2022 at 10:40

Mohamad dorqi

324 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kelvin · Accepted Answer · 2022-08-01 10:44:33Z

1

You appended the wrong element (img instead of canvas).

 var questionHeader = document.getElementById("a");
 var img = new Image(),
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d");

  img.onload = () => {
    let width = Math.floor(img.naturalWidth * 0.1),
      height = Math.floor(img.naturalHeight * 0.1);
    canvas.width = width;
    canvas.height = height;
            canvas.style.border   = "1px solid";

    ctx.drawImage(img, 0, 0, width, height);
  };
  img.src = "https://cdn-icons-png.flaticon.com/512/7951/7951990.png";

  questionHeader.appendChild(canvas);

edited Aug 1, 2022 at 10:44

answered Aug 1, 2022 at 10:10

kelvin

2,1551 gold badge14 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to change the width and height of an image JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related