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

JavaScript console.log Data URI

PixiJS のバッジを見て、「どうすれば 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 を用意。

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

いくつかポイントを。

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

これを踏まえて、

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