Griever

画像をBase64にエンコードするBookmarklet

JS

CSS で Base64 を使うのに「確かJavaScriptでできたよなぁ〜」と思ってサッとググって書いてみた。

Firefox で動けばいいと思ってたら Opera でも動きました。Safari でも動くかも（未確認）

javascript:(function(){
	var elem = document.images[0];

	var canvas = document.createElement('canvas');
	canvas.width = elem.width;
	canvas.height = elem.height;
	elem.parentNode.insertBefore(canvas, elem);
	var ctx = canvas.getContext("2d");
	ctx.drawImage(elem, 0, 0);
	elem.parentNode.replaceChild(document.createTextNode(canvas.toDataURL("image/png")), elem);
	canvas.parentNode.removeChild(canvas);
})();

１つ目の画像が Base64 に置き換わる仕様にしてありますが、１つ目の画像が表示されてない状態だとエラーになるので画像だけが表示されてる状態で使ってください。

ページ内の画像を全部 Base64 にしようとかとも思いましたが、重すぎるので自重しました。

ツイートする

Permalink | コメント(0) | トラックバック(3) | 19:27