如何更改圖像的寬度和高度 JavaScript

Question

我有這段代碼可以在我的網站中添加圖像，但我想調整它的大小

 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>

使用此代碼，我想讓圖像更小

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

出於某種原因，它不起作用。 任何人都知道問題可能是什么？

Answer 1

您可以通過 css class 調整 img 的大小，您可以使用 Z686155AF75A60A0F6EZDEDD80C 為 img 設置 class

Answer 2

您附加了錯誤的元素（img 而不是 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);