JavaScriptで<input type=”file”>で選択された画像をimgタグで表示する

作者:

<input type=”file”>で選択された画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>↓画像ファイルを選択します。</p>
    <input type="file" id="target" accept="image/*">
    <p>↓ここに選択された画像を表示します。</p>
    <img id="myImage">
    <script src="load.js"></script>
</body>
</html>

<input type=”file” id=”target”>で選択された画像をid=”MyImage”のimgに表示します。

const target = document.getElementById('target');
target.addEventListener('change', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

JavaScriptでドロップされた画像をimgタグで表示する

作者:

JavaScriptでドロップされた画像をimgタグで表示する

ドロップされた画像をimgタグで表示するサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="target" style="border: solid 1px #0000ff; height: 3em;text-align: center;">
        ここに画像ファイルをドロップします。
    </div>
    <p>↓ここにドロップされた画像を表示します。</p>
    <img id="myImage">
    <script src="drop.js"></script>
</body>
</html>

id=”target”の領域にドロップされた画像をid=”MyImage”のimgに表示します。

const handleDragEvent = function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
};

const target = document.getElementById("target");
target.addEventListener("dragover", handleDragEvent, false);
target.addEventListener("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();

    const file = e.dataTransfer.files[0]
    const reader = new FileReader();
    reader.onload = function (e) {
        const img = document.getElementById("myImage")
        img.src = e.target.result;
    }
    reader.readAsDataURL(file);
}, false);

e.dataTransfer.dropEffect = ‘copy’; は、マウスカーソルを変更するためのコードです。
なくても動作しますが、ブラウザによっては、ドロップできないような印象を与えるため、追加しています。

JavaScriptで画像中のテキストを認識する

作者:

JavaScriptで画像中のテキストを認識するサンプルアプリケーションを作りました。

ブラウザ上でこういうこともできるのですね。

日本語の認識はいまいちな気がしますが、使い方次第では役に立つかも。

Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ エラーになったら

作者:

Google Chromeで、file:///～/index.htmlにアクセスしていると、次のようなエラーが表示された。

Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

ローカルファイルへのアクセスは、セキュリティのため、制限があるようだ

Webサーバーを起動して、http://localhost/～/index.htmlにアクセスすると、エラーは発生しない。

Webサーバーを起動するには、node.jsがインストールされている環境であれば、「http-serverがお勧めだ。

次のコマンドでインストールする。

npm install http-server -g

Webサーバーを起動するには、次のコマンドを実行する。

http-server

publicフォルダーがあればpublicフォルダーが、なければカレントディレクトリがルートになる。

あとは下記のURLにアクセスすれば良い。

http://127.0.0.1:8080/

使用するポート変更するには-pオプションを使用する。
例えば、8000にするなら

http-server -p 8000

とすれば、

http://127.0.0.1:8000/

で、アクセスできるようになる。