Canvasにローカル画像を表示したい

Question

Canvasにローカルの画像を表示したいと思っています。

<canvas id="canvas" ></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext("2d");
    var reader = new FileReader();

    reader.onload = function(event) {
        const chara = new Image();
        chara.onload = function() {
            canvas.width  = chara.naturalWidth;
            canvas.height = chara.naturalHeight;
            ctx.drawImage(chara, 0, 0);
        }
    }
    reader.readAsDataURL("G:\Lighthouse.jpg");
</script>

上記のプログラムで起動させると
'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
のエラーが出ています。

"G:\Lighthouse.jpg"このファイルをBlob型にする必要があるのでしょうか？
その方法がわかりません。

わかる方、教えてもらえないでしょうか？

Comments

[退会済みユーザー]

質問者さん、無言ですが、回答に対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐ返せるのでは？　役に立たなかったならどこがダメだったかを書くと、より期待するものに近い回答が出てくるかも。とにかく無言は NG です。

Answer 1

FileReader の result プロパティ を使って、input type="file" でユーザーが選択した画像ファイルを Data url 形式（"data:image/jpeg;base64, ..." という文字列）で取得し、それを image オブジェクトの src 属性に設定するということがしたいと理解してます。

その理解が正しければ、reader.readAsDataURL の引数に設定するのは input type="file" で選択された画像ファイルになるはずです。

そして、FileReader から Data url を取得してから img 要素の src 属性に設定すると言うことになるはずです。

詳しくは以下の記事を見てください。

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx