Base64画像Viewer

Base64形式画像を表示するツール

このツールの仕組み

① ｢画像をBase64エンコードした文字列｣をフォームに入力、または直接URLパラメータに入力。

例 ?base64image=data:image/png;base64,iVBORw0KGg～

② URLパラメータの文字列をJavaScriptで取得。

例 data:image/png;base64,iVBORw0KGg～

③ URLパラメータの文字列を<img>タグの中に挿入し、画像を表示。

例 <img src="data:image/png;base64,iVBORw0KGg～">

ソースコード【HTML】

<div id="form"><form><input type="text" name="base64image"><input type="submit" value="表示"></form></div> <div id="base64image"></div>

ソースコード【JavaScript】

window.onload = function() { // ** [表示] <div id="base64image"></div>に｢Base64画像｣または｢エラーメッセージ｣を表示 let base64image = document.getElementById("base64image"); // ** [条件] URLパラメータがある場合 if (window.location.search){ // ** [取得] URLパラメータの文字を取得 // ** [取得] base64image=●● let url = window.location.search.split(/\?base64image\=|\&base64image\=/)[1].split("&")[0]; // ** [条件] URLパラメータに｢Base64画像｣がある場合(直接URLパラメータに入力した場合) if (url.match(/^data\:image\/[a-zA-Z]+\;base64\,[%/+=0-9a-zA-Z]+$/)){ // ** [表示] ｢Base64画像｣を<img>タグの中に挿入して表示 url = `<img src="${url}">`; // ** [条件] URLパラメータに｢Base64画像｣がある場合(フォームに入力した場合) } else if (url.match(/^data\%3Aimage\%2F[a-zA-Z]+\%3Bbase64\%2C[%/+=0-9a-zA-Z]+$/)){ // ** [変換] フォーム入力でエンコードされた文字を記号に変換 url = url.split("%2C")[0].replace(/\%3A/gim, ":").replace(/\%2F/gim, "/").replace(/\%3B/gim, ";") + "," + url.split("%2C")[1]; // ** [表示] ｢Base64画像｣を<img>タグの中に挿入して表示 url = `<img src="${url}">`; // ** [条件] URLパラメータに｢Base64画像｣がない場合 } else { // ** [表示] エラーメッセージを表示 url = `<p><b>【入力エラー】</b><br>｢画像をBase64エンコードした文字列｣を入力してください</p>`; } // ** [表示] <div id="base64image"></div>に｢Base64画像｣または｢エラーメッセージ｣を表示 base64image.innerHTML = url; // ** [条件] URLパラメータがない場合 } else { // ** [表示] 説明を表示 base64image.innerHTML = `<p>ここにBase64形式の画像が表示されます</p>`; } };

このJavaScriptについて

・ 改変は自由です。

・ 配布は自由です。

・ クレジット表記は不要です。

免責事項

・ 当JavaScriptの安全性について、当サイトは保証をいたしません。

・ 当JavaScriptの利用で発生した損害や損失やトラブルについて、当サイトは責任を負わないものとします。