[JavaScript] imgタグの画像をBase64形式に変換する

投稿日：2017年10月25日更新日：2019年5月6日

imgタグの画像をBase64形式に変換するサンプルです。

サンプルソース

例）canvasのデータをjpeg形式としてBase64化する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
function getBase64(){
  //img要素オブジェクトを取得する
  var obj = document.getElementById("img1");

  //canvas要素を生成してimg要素を反映する
  var cvs = document.createElement('canvas');
  cvs.width  = obj.width;
  cvs.height = obj.height;
  var ctx = cvs.getContext('2d');
  ctx.drawImage(obj, 0, 0);

  //canvas要素をBase64化する
  var data = cvs.toDataURL("image/png");

  //d1要素に書き出す
  document.getElementById("d1").innerText = data;
}
</script>
</head>
<body>
  <img id="img1" src="inu.png">
  <input type="button" id="btn1" value="ボタン" onclick="getBase64();">
  <div id="d1"></div>
</body>
</html>

<!DOCTYPE html>

<head>

function getBase64(){

//img要素オブジェクトを取得する

var obj = document.getElementById("img1");

//canvas要素を生成してimg要素を反映する

var cvs = document.createElement('canvas');

cvs.width = obj.width;

cvs.height = obj.height;

var ctx = cvs.getContext('2d');

ctx.drawImage(obj, 0, 0);

//canvas要素をBase64化する

var data = cvs.toDataURL("image/png");

//d1要素に書き出す

document.getElementById("d1").innerText = data;

}

</script>

</head>

<body>

</body>

</html>

（結果例）: data:image/png;base64,/9j/4AAQS...

解説

imgタグの画像をBase64形式に変換するには、一旦canvas要素に変換してからBase64に書き出します。
上記サンプルはローカル環境だと、セキュリティ（クロスドメイン制約）のため実行できません。（※Tainted canvases may not be exportedエラーが発生します。）
実行したい場合は、レンタルサーバー等にアップしてご確認ください。

執筆者：とら