jQuery: canvasによる画像サイズ変更

Question

以下のようにコードを書いていますが、画像がうまく反映されません。
エラーは発生していません。
画像をcanvasを使って表示したいのですが、一部分しか表示されません。
例えば、600 x 600の画像を読み込んだ場合、
表示が300 x 150になって頭の部分しか見れません。

drawImageが効いていないように見受けられます。
こちらはなぜでしょうか。
ご回答していただければ幸いです。

const ctx = resizePic[0].getContext("2d");

  $("#pic").on("change", function (event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();

    reader.onload = (event) => {
      const image = new Image();
      image.src = event.target.result;

      image.onload = function () {
        $("#resize-pic").width(this.width).height(this.height);

        let w = Number(this.width);
        let h = Number(this.height);

        ctx.drawImage(image, 0, 0, w, h);
      };
    };

    reader.readAsDataURL(file);

<div class="wrapper">
        <div class="get-image">
          <p>画像読み込み</p>
          <input type="file" id="pic" />
        </div>
        <div class="image-resize" id="image-resize">
          <p>リサイズ画像</p>
          <canvas class="canvas" id="resize-pic"></canvas>
        </div>
      </div>

Comments

[m.ts10806]

>画像がうまく反映されません。
何が起きているのでしょう
>drawImageが効いていないように見受けられます。
エラーが発生していないかブラウザ開発ツールのコンソールで確認しましたか？
https://teratail.com/help/question-tips#questionTips34

[CatBot]

エラーは発生していません。画像をcanvasを使って表示したいのですが、一部分しか表示されません。

[m.ts10806]

質問は編集できるので、確認した状況が赤の他人に伝わるように修正願います。

>一部分しか表示されません。
どういう画像（サイズなど）がどう表示されているか提示されないことには
答えようがないとも思います。

Answer 1

表示が300 x 150になって頭の部分しか見れません。

canvasのデフォルトサイズです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas

this が画像そのものではなくcanvasを示しているのだと思います（デバッグで値確認を）

対策としては下記いずれか

• 画像を指定サイズにリサイズして表示する（canvasにもそのサイズを反映）
• 画像のリアルサイズを取得してcanvasに反映（でも大きすぎると画面はみ出して全体レイアウトに影響する。スクロール出す？）
• canvasのサイズをかなり大きくする（非推奨）

その画像をその後どう利用するかによって決めてください。（仕様になるので）

Comments

[CatBot]

こちらの回答をヒントに以下のように編集しました。
原因はcanvasサイズを指定していなかったためです。
$("#resize-pic").width(this.width).height(this.height);
→
$("#resize-pic").attr("width", this.width);

[m.ts10806]

thisは語り始めると結構闇が深い（偏見）ので、他に表現できる方法があるなら使わない方が良いと思います。
https://qiita.com/yassun-youtube/items/890370a892835f7ae2b6