夕暮ログ

C#やJavascript、最近はAndroidなんかも好きなtinqのブログ。「夕暮れログ」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

javascriptだけで画像をBase64に変換する

画像をBase64に変換する際、HTML5で定義されたCanvasタグを使って簡単に行えます。
たとえば、このブックマークレットです。
http://d.hatena.ne.jp/Griever/20081205/1228472832
画像ページを開き、このブックマークから実行するとBase64が表示されます。
結構便利です。
そのコードを拝借してきました。
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);
})();
これを、GIF等にも対応させます。 といっても、プロンプトを表示させるだけです。
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(prompt("画像の形式を指定してください。未対応の場合、image/pngになります。"))), elem);
	canvas.parentNode.removeChild(canvas);
})();
これで、image/gifやimage/jpegを指定すればブラウザが対応している場合、その形式になるはずです。
ここを右クリックしてブックマークに追加してください

さらに、FileAPIを使って、ローカルファイルをBase64に変換するのを作ってみました。
FileAPIに対応したブラウザでのみうごきます。
「Base64に変換する」
本当は、指定形式に変換できるようにするつもりだったのですが、セキュリティエラーでできないようです。残念。
関連記事

コメント

ここをクリックしてコメントを投稿

非公開コメント

トラックバック

http://tinqwill.blog59.fc2.com/tb.php/19-bcb2d1d2

« next  ホーム  prev »

プロフィール

tinq tinq(もしくはTinqWill)

Sky  For   Every 改装予定

プログラミングお勉強中の高校生。月一くらいは更新したい

最新記事

カテゴリ

月別アーカイブ

検索フォーム

最新コメント

リンク

最新トラックバック

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。