OpenCV imageをHTML img タグに変換する

Fri, Apr 22, 2022

${{DZ_TITLE}}$
OpenCVのImageをタグにエンコードして、HTML単独で埋め込む方法

どんな時に使うの？

画像系のAI開発などしていると、画像評価結果をレポートする事が多々あります。
そんな時にHTMLの1つのファイルにまとめると、Google DriveやSlack、Teams、メールなんかで簡単に共有できるようになります。

コード

def to_html_img_tag(img: cv2.Mat, attributes: dict = {}) -> str:
    """
    Open CV image to HTML image tag

    Parameters
    ----------
    img : cv2.Mat
        Open CV image
    attributes: dict
        Attributes

    Returns
    -------
    """
    attributes_str = ""
    for key, val in attributes.items():
        if type(val) is str:
            attributes_str += f' {key}="{val}"'
        elif type(val) is float or type(val) is int:
            attributes_str += f" {key}={val}"
        else:
            raise Exception("Incorrect type attributes")

    cnt = cv2.imencode(".png", img)[1]
    dat: str = base64.encodebytes(cnt).decode("utf-8")
    return f'<img src="data:image/png;base64,{dat}"{attributes_str}>'

使い方

import cv2

tag = to_html_img_tag(img)

結果
途中省略していますが、こんな感じでimgタグに、base64変換して埋め込まれているコードが作成されます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANS
      :
FRKYWYSPiIiPwHwf2saqiIOfK/kAAAAAElFTkSuQmCC">

cvplusで簡単に

cvplusを使う事で、下記の様に簡単に作業出来ます。

from cvplus import cvt
img = cvt.imread("test.jpg")
img_tag = cvt.to_html_img_tag(img)

HTMLファイルを書き出すなら、色々省略して簡易的には下記の様な感じですね。

from cvplus import cvt
img = cvt.imread("test.jpg")
img_tag = cvt.to_html_img_tag(img)
with codecs.open("test.html", "w+", "utf8") as f:
    f.write(f"<html>{img_tag}</html>")

簡単にインストールできます。
環境に合わせて使ってください。

py -m pip install cvplus
python -m pip install cvplus
python3 -m pip install cvplus

Githubにてマニュアル見れます。
https://github.com/daizyu/cvplus

もっとPythonを学びたいなら

Python徹底解説
 Python - OpenCV徹底解説

外部サイト
↓プログラムを学んでみたい場合、学習コースなどもおすすめです！

OpenCV imageをHTML img タグに変換する

どんな時に使うの？

コード

cvplusで簡単に

関連

おすすめ記事

もっとPythonを学びたいなら

Comments