img要素からbase64文字列に変換
img要素からbase64文字列に変換する場合は、次のようにすることで可能です。
- ※ canvasを使用していますので、IE8以下には対応していません。
関数定義
JavaScript
var imageToBase64 = function(imgElement, mimeType) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
if (!imgElement || typeof mimeType !== 'string') return '';
mimeType = mimeType.replace(/\/png$/, '/octet-stream');
canvas.width = imgElement.width;
canvas.height = imgElement.height;
context.drawImage(imgElement, 0, 0);
var base64String = canvas.toDataURL(mimeType);
canvas.clearRect(0, 0, 60, 60);
return base64String;
};使い方
引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
imgElement | element または node | 対象のimg要素 |
| 第二引数 必須 |
mimeType | string | 画像のMIMEタイプ |
JavaScript
var imgElement = document.getElementsByTagName('img')[0],
base64String = imageToBase64(imgElement, 'image/jpeg');
console.log(base64String);