console.log で画像を表示する ( Data URI 版)

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー JavaScirpt

PixiJS のバッジを見て、「どうすれば console.log で画像を表示する」ことができるのか、と気になったので試してみました。

実験結果

console.log で画像や装飾された文字列を出力した図
console.log で画像や装飾された文字列を出力した図

画像も文字装飾も表示できました。

コード

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>console.log 表示テスト</title>
</head>
<body>
    <script src="./js/index.js"></script>
</body>
</html>

スクリプトを読み込ませているだけの白紙ページです。

JavaScript

console.log('　 %cCAFEBABE', `
    color: #662200;
    font-size: .8rem;
    padding: .2rem .4rem;
`);
console.log('%c ', `background-image: url("data:image/png;base64,iVBORw ... 略 ... 5CYII=");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border: solid 1px #999;
    padding-right: 100px;
    padding-bottom: 121px;
`);
console.log('　 %cCAFEDEAD', `
    background-color: #662200;
    color: #ffffff;
    font-size: .8rem;
    padding: .2rem .4rem;
`);

以下の3つの console.log を用意。

  1. 文字色変更
  2. 背景画像として画像を表示
  3. 文字色変更+背景色変更

いくつかポイントを。

  • 基本は %c ( C言語 の printf で見るような出力変換指定子)
  • %c で置換された文字列にスタイルが適用できる

これを踏まえて、

  • 文字装飾
    • %c を混ぜた文字列を console.log の第一引数に指定
    • 第二引数にテンプレートリテラル(可読性のため)で css を記述
  • 画像表示
    • %c を第一引数に指定
    • css で background-image を指定する
      • url() のパラメータは URL 形式
        • 相対パスは不可
        • パス指定しなければそもそも良いのでは？ということで今回の実験では Data URI を使用

という形に。

理屈が分かればサクッとできるので遊ぶにはちょうど良さそうです。

備考

Chrome 系のブラウザ以外では表示崩れが発生するので、あくまで Chrome だけ、と考えた方が良さそうです。

参考

console.log

Data URI 変換

Java のマジックナンバーについて

console.log

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧