LoginSignup
16
16

More than 5 years have passed since last update.

1行で Data URI を生成する方法

Posted at

こんにちは,最近のメイン技術は Titanium な @isseium です.
フロントエンド最先端な方にとってみれば今更だと思うのですが最近は data uri scheme を調べています.

Wikipedia からの引用になりますが,赤い点( )はこれで表現できるみたいです.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg== />

さて,この意味不明な文字列(バイナリを文字列化したもの)はどうやって作るのでしょうか?

仕様的な部分は Base64 をご覧いただくとして,どうやってやるかを誤解をあえて恐れずシンプルに1行でお伝えします!

Terminal を起動して...

$ echo "data:image/png;base64,"$(base64 <元画像ファイルのパス>)

だけです!

MacOS Xで確認しています! png の部分は画像フォーマットによって随時変更.画像以外もおkです.詳しくは仕様をご覧ください.

例えば僕のアイコンである ipukun は


<img src="data:image/png;base64,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" />

な感じで表現できます!

Let's data uri scheme!!!

16
16
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
16