tag:crieit.net,2005:https://crieit.net/tags/console.log/feed
「console.log」の記事 - Crieit
Crieitでタグ「console.log」に投稿された最近の記事
2021-03-20T16:45:07+09:00
https://crieit.net/tags/console.log/feed
tag:crieit.net,2005:PublicArticle/16759
2021-03-20T16:45:07+09:00
2021-03-20T16:45:07+09:00
https://crieit.net/posts/show-image-in-consolelog-20210320
console.log で画像を表示する ( Data URI 版)
<p>PixiJS のバッジを見て、「どうすれば console.log で画像を表示する」ことができるのか、と気になったので試してみました。</p>
<h2 id="実験結果"><a href="#%E5%AE%9F%E9%A8%93%E7%B5%90%E6%9E%9C">実験結果</a></h2>
<p><a href="https://crieit.now.sh/upload_images/f034189a57e5535234b04125504f3f73604cddd7093c1.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/f034189a57e5535234b04125504f3f73604cddd7093c1.jpg?mw=700" alt="console.log で画像や装飾された文字列を出力した図" /></a></p>
<p>画像も文字装飾も表示できました。</p>
<h2 id="コード"><a href="#%E3%82%B3%E3%83%BC%E3%83%89">コード</a></h2>
<h3 id="html"><a href="#html">html</a></h3>
<pre><code class="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>
</code></pre>
<p>スクリプトを読み込ませているだけの白紙ページです。</p>
<h3 id="JavaScript"><a href="#JavaScript">JavaScript</a></h3>
<pre><code class="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;
`);
</code></pre>
<p>以下の3つの <code>console.log</code> を用意。</p>
<ol>
<li>文字色変更</li>
<li>背景画像として画像を表示</li>
<li>文字色変更+背景色変更</li>
</ol>
<p>いくつかポイントを。</p>
<ul>
<li>基本は <code>%c</code> ( C言語 の <code>printf</code> で見るような出力変換指定子)</li>
<li><code>%c</code> で置換された文字列にスタイルが適用できる</li>
</ul>
<p>これを踏まえて、</p>
<ul>
<li>文字装飾
<ul>
<li><code>%c</code> を混ぜた文字列を <code>console.log</code> の第一引数に指定</li>
<li>第二引数にテンプレートリテラル(可読性のため)で css を記述</li>
</ul></li>
<li>画像表示
<ul>
<li><code>%c</code> を第一引数に指定</li>
<li>css で <code>background-image</code> を指定する
<ul>
<li><code>url()</code> のパラメータは URL 形式
<ul>
<li>相対パスは不可</li>
<li>パス指定しなければそもそも良いのでは？ということで今回の実験では Data URI を使用</li>
</ul></li>
</ul></li>
</ul></li>
</ul>
<p>という形に。</p>
<p>理屈が分かればサクッとできるので遊ぶにはちょうど良さそうです。</p>
<h2 id="備考"><a href="#%E5%82%99%E8%80%83">備考</a></h2>
<p>Chrome 系のブラウザ以外では表示崩れが発生するので、あくまで Chrome だけ、と考えた方が良さそうです。</p>
<h2 id="参考"><a href="#%E5%8F%82%E8%80%83">参考</a></h2>
<h3 id="console.log"><a href="#console.log">console.log</a></h3>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/oohira/items/6c30bdf3636a134cf119">JavaScript Consoleに面白い出力をしているサービス - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/redshoga/items/092847c8fa29b9d62d55">ブラウザのコンソールで画像を表示させたりして遊ぶ🐈 - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/k_ui/items/bdbac718116d8cffd2c2">console.log で画像表示 - Qiita</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://ginpen.com/2020/12/06/print-images-in-console/">コンソールでパーティする、つまり画像を表示する（Chrome以外はアレ）（ひとり DevTools Advent Calendar 2020 – 06日目） | Ginpen.com</a></li>
</ul>
<h2 id="Data URI 変換"><a href="#Data+URI+%E5%A4%89%E6%8F%9B">Data URI 変換</a></h2>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://css-tricks.com/data-uris/">Data URIs | CSS-Tricks</a></li>
<li><a target="_blank" rel="nofollow noopener" href="https://websemantics.uk/tools/image-to-data-uri-converter/">Image to base64 data-URI converter</a></li>
</ul>
<h3 id="Java のマジックナンバーについて"><a href="#Java+%E3%81%AE%E3%83%9E%E3%82%B8%E3%83%83%E3%82%AF%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">Java のマジックナンバーについて</a></h3>
<ul>
<li><a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/Java%E3%82%AF%E3%83%A9%E3%82%B9%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB#.E3.83.9E.E3.82.B8.E3.83.83.E3.82.AF.E3.83.8A.E3.83.B3.E3.83.90.E3.83.BC">Javaクラスファイル - Wikipedia</a></li>
<li><a target="_blank" rel="nofollow noopener" href="http://radio-weblogs.com/0100490/2003/01/28.html">bbum's rants, code & references</a></li>
</ul>
arm-band