JavaScriptの変数に入っている画像データ(インラインイメージ)を表示する方法
スポンサーリンク
解説
JavaScriptの変数に入っている画像データを表示する方法について。
JavaScriptの変数に画像データを入れて、それを表示することができる。
htmlの中にインラインイメージとしていれてしまうと、htmlファイルのサイズを大きくなってしまうが、逆に、httpのリクエスト数を減らすことができる。使い方次第でパフォーマンスが改善できる、かも。
方法
最初と最後の行を消して、
上記の値の前に,
あとは、imageタグのsrcに入れるだけ。
としたり
実際に入れてみるとこんなカンジ。
サンプルコード
例
http://paranoid.dip.jp/dev/js/javascript-var-image.html
JavaScriptの変数に入っている画像データを表示する方法について。
JavaScriptの変数に画像データを入れて、それを表示することができる。
htmlの中にインラインイメージとしていれてしまうと、htmlファイルのサイズを大きくなってしまうが、逆に、httpのリクエスト数を減らすことができる。使い方次第でパフォーマンスが改善できる、かも。
方法
- 画像をbase64でエンコードする
- base64した値を変数に入れる
- imgタグのsrcに変数につっこむ(はじめからimgのsrcに入れておいてよい)
b64encode -o 64.txt input.png input.png
64.txtの中身はこんなカンジ。
begin-base64 644 input.png iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx jwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFU OE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kd cKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsn FjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1 eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZm XqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCP tbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+ p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/ 2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iu fkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiH nZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjo U8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC ====
最初と最後の行を消して、
:%s/.*/'&' +/
して、最後の行の+を;にする。
'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx' + 'jwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFU' + 'OE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kd' + 'cKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsn' + 'FjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1' + 'eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZm' + 'XqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCP' + 'tbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+' + 'p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/' + '2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iu' + 'fkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiH' + 'nZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjo' + 'U8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC';
上記の値の前に,
data:image/png;base64,
を追加する。
var data = 'data:image/png;base64,'+ 'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx' + 'jwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFU' + 'OE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kd' + 'cKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsn' + 'FjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1' + 'eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZm' + 'XqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCP' + 'tbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+' + 'p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/' + '2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iu' + 'fkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiH' + 'nZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjo' + 'U8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC';
あとは、imageタグのsrcに入れるだけ。
<script type="text/javascript">
var e = document.getElementById('image');
e.src = data;
</script>
としたり
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFUOE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kdcKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsnFjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZmXqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCPtbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iufkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiHnZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjoU8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC" />
実際に入れてみるとこんなカンジ。
サンプルコード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JavaScript,画像,変数,表示" />
<title>JavaScriptの変数に入っている画像データを表示する方法</title>
</head>
<body>
<h1>JavaScriptの変数に入っている画像データを表示する方法</h1>
<img id="image" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFUOE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kdcKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsnFjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZmXqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCPtbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iufkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiHnZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjoU8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC" />
</body>
<script type="text/javascript">
var data = 'data:image/png;base64,'+
'iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx' +
'jwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAlpJREFU' +
'OE+dU11IU2EYPkMF9UIRvBa8E/wNxMm5UNRNQZ1Tb7zRCyeCYjcOGZk6MIZFdVFhWc3ZduaWo2kd' +
'cKA4JyyLvEgSN91FUBt0ZWYFUXqxp+97ZWfNEUEfvJzved+X5zzvz6eKx+O3BEG4xOz/DiN4gwsn' +
'FjvFwMAqzs6SgcnJ11hYOLyYCoER+COR71CrH6Cx0Y7mZidKS+9DpZqGVisR5paRMY2Sklm68zy1' +
'eg6h0JdzgpOTUywvh2A0rqG39xlE0YbsbAv6+lYwNLSK/v4XyMmxkJ/HR0fXWH4Yx8e/zgkSumZm' +
'XqKrS4Jev4SOjqfsvoTCwpuorZ0nrNdznwSLJaiUohCMjPhQV/cIOh1P8qC720MEBQU3UFNjVTCP' +
'tbYuppbA6YLBj0zWPszmLRgMK0z+czKuoL7+iYJ5bGoqAK83lF4CJ2ppcaKy8i6amhxkeXnXUV4+' +
'p2Ae02qd6SUkPKI4zxonw2p9S1ZcfIcamcDDwzL1JHFSmsidfEwVFUkF+fnpCjSavyjY3o6xHvj/' +
'2QOzeRNHRz9IRIoCk2kD7e12mgKfwJ9TSGD+1ekkHBx8ThLwTRTFhyzgRlubGxqNRCS8nMzMa6iu' +
'fkx70NDgYD9ws33w0MjHxgLJTZSkXVRVzWJ83A+bbRe8WU7nHtbX34Mrm5gIQJYjtK1lZfewuLiH' +
'nZ1PRLDJtdjt7yAIl+Fy7ZO0oqLb6Onx0t1gkJGVdQWx2DcEAh+Qm3sVnZ0uemyc4BVPMhq3MDjo' +
'U8ZjMgWZig3C0ehPtn0OhMNfCft8UbZYMhH8Br7xq4st2vcPAAAAAElFTkSuQmCC';
var e = document.getElementById('image');
e.src = data;
</script>
</html>
例
http://paranoid.dip.jp/dev/js/javascript-var-image.html
スポンサーリンク
スポンサーリンク
いつもシェア、ありがとうございます！
もっと情報を探しませんか？
関連記事
最近の記事
- パナソニック ジェットウォッシャードルツ EW-DJ61-Wのホースの修理
- LinuxセキュリティモジュールIntegrity Policy Enforcement
- アマゾンのEcho Show 5を買ったのでレビューします
- アマゾンのサイバーマンデーはAlexa Echo Show 5が安い
- Android スマートフォン OnePlus 7T と OnePlus 7の違い
- Android スマートフォン OnePlus 7 をAndroid10にアップデートしてみた
- クレジットカードのバーチャルカードの比較のまとめ
- 活動量計 Xiaomi Mi Band 4を買ってみたのでレビュー
- Android スマートフォン OnePlus 7 のレビュー
- AliExpressでスマートフォンを買い物してみた
- パソコンのホコリ対策 レンジフードフィルターと養生テープ
- 80PLUS GOLDのPC電源ユニットAntec NeoEco 750 Goldのレビュー
- イギリスの付加価値税 VAT は払い戻しを受けられる
- イギリスのロンドンでスーツケースなど荷物を預けられる場所は
- イギリスのロンドンで地下鉄やバスに乗るならオイスターカードを使おう
- イギリスのヒースロー空港からロンドン市内への行き方
- 航空便でほかの航空会社に乗り継ぎがある場合のオンラインチェックイン
- SFC会員がANA便ではなくベトナム航空のコードシェアを試して解ったこと
- ベトナムの入国審査でeチケットの掲示が必要だった話
- シアトルの交通ICカードはオルカカード（Orca)です
人気のページ
- Windows7 IME 辞書ツールで単語の登録に失敗しました
- C言語 popen()でコマンドを実行して出力を読み込む
- Windows7で休止状態にする方法
- CentOS MySQLの起動、停止、再起動
- loggerコマンドでsyslogにエラーを出力する方法
- パソコンパーツの買取をしてくれる店のまとめ
- Java Mapの使い方 get(),put(),remove(),size(),clear()
- 楽天のRポイントカードを作ってみた
- iPhone 5 から iPhone 6 に乗り換えたのでレビュー
- netstatコマンドのステータスの意味
スポンサーリンク
過去ログ
2020 : 01 02 03 04 05 06 07 08 09 10 11 122019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12