JavaScriptやCodePenに画像を埋め込む方法 - ITエンジニア勉強ブログ

ちょっとしたコードスニペットやCodePenなどを公開する際に、画像リソースの置き場所に困ることがあるのではないでしょうか。この記事ではJavaScriptファイル内やCodePenに画像を直接埋め込む方法を紹介します。

といっても特別なことは何もなく、フロントエンドに精通した方には明らかだと思いますが、筆者のような初心者向けにやり方を残しておきたいと思います。

imgタグにデータURLを設定
データURLへの変換

imgタグにデータURLを設定

通常、imgタグをHTMLに配置する場合は、src属性に画像のURLを指定するかと思います。

<img src="画像ファイルのURL"></img>

このsrc属性には、通常のURL以外にも、データURLという形式のテキストを設定することができます。データURLとは、画像などのリソースデータを何らかの形式（現行ではbase64のみ？）でエンコードしたデータを、あたかも通常のURLかのように扱えるデータ形式のことです。この機能によって、画像データをbase64でエンコードしたテキストをタグに直接埋め込むことができます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ... 長いので省略"></img>

JavaScriptで後から設定してもsrc属性を設定しても同様に機能します。

const img = document.getElementById("img");
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg ... 長いので省略";

よって、使用したい画像をbase64テキスト形式に変換し、それをソースコードに直接書き込めば、外部の置き場所を確保せずにコードスニペットに画像を埋め込めます。

なお、base64テキストは画像のサイズに応じて長いテキストになりますので、スニペット自体のサイズにはご注意ください。この記事にもデータURLを含むタグを直接埋め込もうとしたのですが、エディタがだいぶ重くなった上、レンダリングされた結果を見ても通常のURLなのかデータURLなのか区別がつかないのでやめました。

データURLへの変換

画像をデータURLないしbase64テキスト（正確には「データURL = ヘッダ + base64テキスト」）に変換する方法はいろいろとありますが、JavaScriptではFileReaderクラスにreadAsDataURLというズバリな機能があります。

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="画像のプレビュー...">

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // 画像ファイルを base64 文字列に変換します
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}