【対策コードあり】ローカルファイルをCanvasに表示する

やりたいこと

ローカルの画像ファイルをHTMLのCanvasに表示します。

検索するといくつか引っかかるのですが、試してみたところ動作しませんでした。

（エラーなどは出力されずCanvasになにも表示されませんでした。）

環境

Chrome：131.0.6778.86

試したコード

HTML

<input type="file" id="file" accept="image/png, image/jpeg"></div>
<canvas id="canvas"></canvas>

JavaScript

document.getElementById("file").onchange = (event) => {
    const file = event.target.files[0];
    if(!file.type.match(/^image\/(png|jpeg)$/)) return ;
    const reader = new FileReader();
    reader.onload = (event) => {
        const img = new Image();
        img.src = reader.result;

        canvas.width  = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
    }
    reader.readAsDataURL(file);
}

ファイルが選択された際にImageを作成してsrcに選択された画像を入れています。

作成された画像をCanvasにdrawImageで描画しています。正しそうに見えますが、自分の環境では動作しませんでした。

対策

JavaScript側を以下のように修正することで動作しました。

imgのsrcを設定後にimgを操作するコードをsetTimeoutを呼ぶことで、いったんIdle状態にしたあとに行うようにしています。

document.getElementById("file").onchange = (event) => {
    const file = event.target.files[0];
    if(!file.type.match(/^image\/(png|jpeg|gif)$/)) return ;
    const reader = new FileReader();
    reader.onload = (event) => {
        const img = new Image();
        img.src = reader.result;

        setTimeout( ()=> {
            canvas.width  = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0);
            });
    }
    reader.readAsDataURL(file);
}

結果

ローカルの画像ファイルをCanvasに表示することができました。