如何更改图像的宽度和高度 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?

Answer 1

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

Answer 2

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);