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

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

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

サンプルソース

例）Base64文字列をimgタグにセットする

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

function setBase64(){
  //Base64データをimgタグに設定
  document.getElementById("img1").src = data
}
</script>
</head>
<body>
  <input type="button" id="btn1" value="ボタン" onclick="setBase64();">
  <img id="img1" width="200" height="200">
</body>
</html>

<!DOCTYPE html>

<head>

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

function setBase64(){

//Base64データをimgタグに設定

document.getElementById("img1").src = data

}

</script>

</head>

<body>

</body>

</html>

解説

Base64データをimgタグに反映させるには、Base64文字列をsrcにセットするだけでＯＫです。
Base64データをcanvasに反映させたい場合は、以下ページをご覧ください。
⇒ [JavaScript] Base64形式の画像データをcanvasに表示する

執筆者：とら