Chromeを使って画像をbase64化する方法

Chromeを使って画像をbase64化する方法
このエントリーをはてなブックマークに追加
PR

PHPでbase64化する方法を前日紹介いたしましたが、今回はローカルで簡単に画像をbase64化する方法です。
動的に画像をbase64化するのではなく、固定されている画像などの場合にはbase64化してからの利用になります

 

Chromeで画像をbase64化する方法

まずはChromeを起動します、新しいタブを開きそこに画像をドラッグアンドドロップします

Chromeを使って画像をbase64化する方法 (2)

そうすると、Chromeで画像を開いた状態になります、ここでF12キーを押して開発モードに切り替えます

開発モードにあるResourcesタブを開きます

Chromeを使って画像をbase64化する方法 (3)

 

ResourcesタブにあるFrames >フォルダ(ファイル名) > images >対象の画像を選択します

Chromeを使って画像をbase64化する方法 (5)

選択した画像が右に表示されます、その画像をクリックしたまま上のエリアにドラッグアンドドロップします
これでbase64に変換されました

変換されたものはアドレスバーに表示されています

Chromeを使って画像をbase64化する方法 (1)

あとは、これをimgタグに入れたり、cssのbackgroundタグで呼び出したり出来ます

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)