imasara2script: HTML5の機能で画像ファイルを埋め込みイメージタグに変換するサンプル

2017年4月17日月曜日

base64エンコードという処理をするとHTMLファイルに画像ファイルなどを埋め込むことが可能になります。
そのbase64エンコードをやってくれるwebサービスなどもありますが、ブラウザでHTML5の機能だけでやることも可能です。
その変換用サンプルを作成しました。

起動画面

変換したい画像ファイルを「右クリック」→「編集」で
（この記事で使用している画像ファイルはicooon-mono.comからダウンロードさせていただきました）

ペイントで開いたら

「Ctrl + A」で全体を選択した後「Ctrl + C」でコピーして

先ほどのHTA画面の編集エリアで「Ctrl + V」で貼りつけて

「view」ボタンを押せば埋め込みイメージタグの完成

以下が上記で作成した埋め込みイメージ

以下ソース

	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	</head>
	<title>contentEditable</title>
	<style>html, body, table, div, textarea{width:100%;height:100%}</style>
	<body style="overflow:hidden;margin:0px">
	<table>
	<tr height=1><td><button id=btn>source</button></td></tr>
	<tr>
	<td>
	<div id=div contentEditable=true></div>
	<textarea id=ta wrap=off></textarea>
	</td>
	</tr>
	</table>
	</body>
	<script>
	resizeTo(300,300)
	btn.onclick=function(){
	var s=this.innerText, swV=s!='view', b='block', n='none'
	this.innerText = swV ? 'view' : 'source'
	div.style.display = swV ? b : n
	ta .style.display = swV ? n : b
	;(swV ? div : ta)[swV ? 'innerHTML' : 'value'] = (swV ? ta : div)[swV ? 'value' : 'innerHTML']
	}
	btn.onclick()
	</script>
	</html>

imasara2script