<img>要素 ⇔ Base64 相互変換についてのまとめです。注意点として、<img>要素 → Base64 の時は、Ajax同様に JavaScript のクロスドメイン制限があります。つまり、外部サーバーにある画像をBase64形式に変換することはできません。
<img>要素 → Base64
JavaScript
//=====================================================
// <img>要素 → Base64形式の文字列に変換
// img : HTMLImageElement
// mime_type : string "image/png", "image/jpeg" など
//=====================================================
function ImageToBase64(img, mime_type) {
// New Canvas
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// Draw Image
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// To Base64
return canvas.toDataURL(mime_type);
}
//=====================================================
// 使い方
//=====================================================
var img = document.getElementById('MyImg');
var b64 = ImageToBase64(img, "image/jpeg"); // "data:image/jpeg;base64,XXXXXX..." みたいな文字列
⇒ デモはこちら：Image to Base64｜JSFiddle
この手法を応用すると、画像リサイズや回転もできます。⇒ 別記事参照
Base64 → <img>要素
JavaScript
//=====================================================
// Base64形式の文字列 → <img>要素に変換
// base64img: Base64形式の文字列
// callback : 変換後のコールバック。引数は<img>要素
//=====================================================
function Base64ToImage(base64img, callback) {
var img = new Image();
img.onload = function() {
callback(img);
};
img.src = base64img;
}
//=====================================================
// 使い方
//=====================================================
Base64ToImage(base64img, function(img) {
// <img>要素にすることで幅・高さがわかります
alert("w=" + img.width + " h=" + img.height);
// <img>要素としてDOMに追加
document.getElementById('main').appendChild(img);
});
Base64形式の文字列を <img>要素に変換することで幅と高さが分かるようになります。また、そのままDOMに追加することもできます。
⇒ デモはこちら：Base64 to Image｜JSFiddle
(･o･ゞ いじょー。