[JavaScript] Base64形式の画像データをcanvasに表示する

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

Base64形式の画像データをcanvasに表示するサンプルです。

サンプルソース

例）Base64文字列をcanvasにセットする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script>
var data = "data:image/jpeg;base64,/9j/4AAQS..."; //Base64データ（省略しています）

function setBase64(){
  //2Dコンテキストのオブジェクトを生成する
  var cvs = document.getElementById('cvs1');
  var ctx= cvs.getContext('2d');

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

  //画像をcanvasに設定
  img.onload = function(){
    ctx.drawImage(img, 0, 0, 200, 200);
  }
}
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" onclick="setBase64();">
  <canvas id="cvs1" width="200" height="200"></canvas>
</body>
</html>

<!DOCTYPE html>

<head>

var data = "data:image/jpeg;base64,/9j/4AAQS..."; //Base64データ（省略しています）

function setBase64(){

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

var cvs = document.getElementById('cvs1');

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

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

var img = new Image();

img.src = data;

//画像をcanvasに設定

img.onload = function(){

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

}

</script>

</head>

<body>

</body>

</html>

解説

canvasにBase64データを反映させるには、Imageオブジェクトを作成して、drawImageでセットすればＯＫです。
Base64データをimgタグに反映させたい場合は、以下ページをご覧ください。
⇒ [JavaScript] Base64形式の画像データをimgタグに表示する

執筆者：とら