【JavaScript/Flask】PNG画像クリックで画像上の座標を取得する手順。

今回の記事はFlask環境で作成したWebアプリ環境でブラウザ上で画像をクリックすることでブラウザ画面ではなく、画像上の座標を取得する手順についてご紹介します。

今回表示する画像は「svg」「png」画像にします。「jpg」の場合はpngの部分を置き換えるのみです。

また、私はJavaScript初心者ですので初心者にとって分かりやすいような解説になっていると思います。

では早速記事に進んでいきます。

クリック用画像を表示させたFlaskプロジェクト作成
画像クリックで画像上の座標を取得するJavaScript紹介

クリック用画像を表示させたFlaskプロジェクト作成

まずはFlaksプロジェクトです。こちらは簡単なので特に解説は入れません。
フォルダ構成は下記のようになっております。

├── app.py
├── static
│   ├── image
│   ├── test.png
│   └── test.svg
└── templates
    └── index.html

下記Flaskの記述のpythonコード

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/index")
def index():
    return render_template("index.html") # templatesフォルダ内のindex.htmlを表示する

if __name__ == "__main__":
    app.run()

次に画像表示ようのHTMLです。

<!DOCTYPE html>
<html lang="ja">

    <body>
        <svg onclick="mccl('svg_image')" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg_image">
            <image id="diagram" href="../static/test.png" x="0" y="0" width="100" height="100"></image>
        </svg>

        <image id="test_svg_img" src="./static/test.svg" alt="GRAYCODE" onclick="mccl('test_svg_img')" width="100" height="100"></image>
        <image id="test_png_img" src="./static/test.svg" alt="GRAYCODE" onclick="mccl('test_png_img')" width="100" height="100"></image>
    </body>
</html>

SVGの画像表示は上記のSVGタグで囲んでイメージを表示するか、通常のImageタグで囲んで表示させるかの2通りがあります。今回クリックされたらの部分でonclickに関数をつかていますので後ほど解説していきます。

表示画像は下記のように画像が三つ並ぶはずです。画像は適宜好きなものにしてください。

ここまではFlaskの最も基本部分と、HTMLで画像を表示させるのみの処理なのでここまではおそらく問題なくで切ると思います。

では次にそのプロジェクトにJavaScriptを実装していきます。

画像クリックで画像上の座標を取得するJavaScript紹介

javascriptは直接HTML記述していきます。

<!DOCTYPE html>
<html lang="ja">

    <body>
        <svg onclick="mccl('svg_image')" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg_image">
            <image id="diagram" href="../static/test.png" x="0" y="0" width="100" height="100"></image>
        </svg>
        <image id="test_svg_img" src="./static/test.svg" alt="GRAYCODE" onclick="mccl('test_svg_img')" width="100" height="100"></image>
        <image id="test_png_img" src="./static/test.svg" alt="GRAYCODE" onclick="mccl('test_png_img')" width="100" height="100"></image>

        <script>
            function mccl(idname){
                var s = document.getElementById(idname);
                var w0="100";//初期値
                var h0="100";//初期値
                w1 = s.getAttribute("width");//現在
                h1 = s.getAttribute("height");
                var r = s.getBoundingClientRect();
                var x=Math.round(event.clientX-r.left);
                var y=Math.round(event.clientY-r.top);
                x=Math.round(x*(w0/w1));
                y=Math.round(y*(h0/h1));
                //////ここ座標
                alert("x座標：" + x + " y座標：" + y);
            };
        </script>
    </body>
</html>

JavaSript部分の解説を行っていきます。

関数は引数をidにして動作するようにしております。初期にいろいろな計算がついておりますが、こちら画像の縮尺を変更させた際に縮尺を合わせるために作成しております。通常の画像ままの場合は特に気にする必要はありません。

上記のように表示がなされるはずです。

画像の中心部の座標は全てこれくらいの値になっているので、画像上の座標となっていることが確認できます。