JavaScript

[JavaScript] 画像変換:<img>要素 ⇔ Base64(相互変換)

More than 1 year has passed since last update.

<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・ゞ いじょー。


参考URL

drawImage() メソッド - Canvasリファレンス|HTML5.jp