[JavaScript] canvasの画像をBase64形式に変換する

投稿日：2017年11月4日更新日：2018年4月28日

canvasの画像をBase64形式に変換するには、.toDataURL()を使用します。

サンプルソース

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
var cvs;  //canvasオブジェクト
var ctx;  //contextオブジェクト

///////////////////////////
// ●canvasに画像を描画する
///////////////////////////
function imageDraw() {
  //2Dコンテキストのオブジェクトを生成する
  cvs = document.getElementById('cvs1');
  ctx = cvs.getContext('2d');

  //画像オブジェクトを生成
  var img = new Image();
  img.src = "inu.png";

  //画像をcanvasに設定
  img.onload = function(){
    ctx.drawImage(img, 0, 0, 200, 200);
  }
}

///////////////////////////
// ●canvasからBase64文字列を取得し画面に表示する
///////////////////////////
function getBase64(){
  //キャンバス→Base64に変換する
  data = cvs.toDataURL("image/jpeg");  

  //Base64文字列を画面に表示する
  var aa = document.getElementById("d1");
  aa.innerText = data;
}
</script>
</head>
<body onload="imageDraw();">
  <canvas id="cvs1" width="200" height="200"></canvas>
  <input type="button" id="btn1" value="ボタン" onclick="getBase64();">
  <div id="d1"></div>
</body>
</html>

<!DOCTYPE html>

<head>

var cvs; //canvasオブジェクト

var ctx; //contextオブジェクト

///////////////////////////

// ●canvasに画像を描画する

///////////////////////////

function imageDraw() {

//2Dコンテキストのオブジェクトを生成する

cvs = document.getElementById('cvs1');

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

//画像オブジェクトを生成

var img = new Image();

img.src = "inu.png";

//画像をcanvasに設定

img.onload = function(){

ctx.drawImage(img, 0, 0, 200, 200);

}

///////////////////////////

// ●canvasからBase64文字列を取得し画面に表示する

///////////////////////////

function getBase64(){

//キャンバス→Base64に変換する

data = cvs.toDataURL("image/jpeg");

//Base64文字列を画面に表示する

var aa = document.getElementById("d1");

aa.innerText = data;

}

</script>

</head>

</body>

</html>

（inu.png）

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

解説

上記サンプルはローカル環境だと、セキュリティ（クロスドメイン制約）のため実行できません。
※Tainted canvases may not be exportedエラーが発生します。
動作確認したい場合は、レンタルサーバ等にアップしてご確認ください。
toDataURLの引数には、イメージのタイプを指定します。
例）"image/png"、"image/jpeg"等。　未指定時は"image/png"とみなされる。

執筆者：とら