3
0

More than 3 years have passed since last update.

Qt上に書けるHTML上のimgタグでネット経由の画像を表示する

Posted at

※筆者が書ける言語の都合上、PyQtでやってますが、Qtでも同じようにできると思います。

Qtではインターネット上の画像を取得することはできない

Qt上でHTMLを記述し、色々な装飾を施せることを知っている人は割と多いと思います。
Qt上で画像を表示するにはQPixmapをQLabelに埋め込むのが一般的(私だけ?)だと思いますが、実はHTMLのimgタグを用いても表示できます(ちょっと操作が面倒くさいかもしれませんが)。
しかし、Qt自体は外部との通信機能を持っているわけではないので、例えば以下の画像を

image.png

<img src="https://raw.githubusercontent.com/atomicswap-network/atomicswap-qt/sechack365-demo/atomicswap/qt/icons/atomicswap-qt.png"/>

のように画像を埋め込もうとしても、以下のように失敗します。

image.png

ちなみにローカルの画像を埋め込む分には相対パスでできます。

だったら画像取得だけ別のライブラリに任せればいいじゃない

pythonにはrequestsという便利なライブラリがあるわけですから、そこに画像取得を任せてしまえばいいのです。
また、HTMLではbase64を用いてバイナリを埋め込むことができます。便利ですねー。
というわけで以下のようにすれば行けます。

import requests
import base64

from PyQt5.QtWidgets import QLabel
# =====中略=====
    self.image = str(
        base64.b64encode(requests.get("https://raw.githubusercontent.com/atomicswap-network/atomicswap-qt/sechack365-demo/atomicswap/qt/icons/atomicswap-qt.png").content)
    )[2:]  # バイナリをstrでキャストすると頭に"b'"がつくのでそれを取り除く。もっといい方法ないのかな...
    self.label = QLabel(f"<img src=\"data:image/png;base64,{self.image}\"/>")

image.png

こんなことするなら普通に埋め込めばいいのでは...使いどころは...

おっしゃる通りです。
でも、HTMLしか書けないところで役に立ちます。例えばaboutダイアログとか。
image.png
(ガバガバ英語は温かい目で見逃して...)

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0