はじめに

「テキストを選択すると背景色が変わる」という単純な仕組みを利用して、一見普通に見える文章の中に実は画像が隠されているWebサイトを作成しました。

実際に作成したサイト
↑テキスト部分をマウスで選択、もしくはCtr + A で全選択すると、アインシュタインの画像が表示されます。サイトの面積が大きいので、ある程度縮小して全体が見れるようにした方がいいです。

↑一見普通に見える文章ですが...

↑マウスで選択すると、アインシュタインの画像が現れます！

GitHubのリンク

目次

Chapter1 各ピクセルの色値を抽出
Chapter2 色値を文字列に埋め込む
今後
参考文献

Chapter1 各ピクセルの色値を抽出

左上から1ピクセルずつRGBで色を抽出しています。Webで使用する際には、RGBを16進数で表記する必要があるので、途中で変換しています。

for y in range(h):
    color_list_sub = []
    for x in range(w):
        rgb = pix[x, y]
        hex_color = '{:02x}{:02x}{:02x}'.format(*rgb)
        color_list_sub.append(hex_color)
    color_list.append(color_list_sub)

Chapter2 色値を文字列に埋め込む

cssファイルに下記のように記述したのち、

.color-000016::selection {background-color: #000016; color: #fff;}

これをHTMLファイル側で下記のように受け取ることで、テキスト選択時の色を指定することができます。

<span class="color-000016">hogehoge</span>

今後

任意の画像を投げることによって、その画像に応じた文章を(Chatgptなどを用いて)自動で生成し、表示したいです。
また、画面サイズ的に300×300ピクセルの画像が適当だと思うので、自動でサイズ変更できる機能も追加したいです。

参考文献

テキストベースのサイトに写真を入れ込む、単純だけどもの凄い仕掛け