Image to Base64

CanvasとFileReaderをつかって画像をBase64にする

by bc_rikko

HTML

<div class="container">
  <h2>Normal</h2>
  <div id="normal">
    <img src="../img/logo.png">
    <textarea><img src="../img/logo.png"></textarea>
  </div>
</div>

<div class="container">
  <h2>Image to Base64 (via Canvas)</h2>
  <div id="base64-canvas">
  </div>
</div>

<div class="container">
  <h2>Image to Base64 (via FileReader API)</h2>
  <div id="base64-filereader">
  </div>
</div>

CSS

body {
  background-color: #FFF;
}

.container {
  margin : 20px 30px;
  padding: 10px;
  background-color: #F3F5F6;
}

h2 {
  font-size: 1.3em;
}

textarea {
  width : 100%;
  height: 50px;
}

JavaScript

//========================================
// Image to Base64 (via Canvas)
//========================================
var imageToBase64viaCanvas = function (url, callback, format) {
  var image = new Image();
  image.onload = function () {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.height = this.height;
    canvas.width  = this.width;
    context.drawImage(this, 0, 0);

		callback(canvas.toDataURL(format));
  };
  
  image.src = url;
};


//========================================
// Image to Base64 (via FileReader)
//========================================
var imageToBase64viaFileReader = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
        var reader  = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
};


//========================================
// main
//========================================

// このパスを隠蔽したい!!!!!!!
var url = '../img/logo.png';

// 2つの呼び出しを書くのが面倒なのでループで処理
var proc = [
  {
    func    : imageToBase64viaCanvas,
    targetId: 'base64-canvas'
  },
  {
  	func    : imageToBase64viaFileReader,
    targetId: 'base64-filereader'
  }
];

proc.forEach(function (proc) {
	var callback = function (base64) {
  	var target = document.getElementById(proc.targetId);

		// Show image
    var img = new Image();
    img.src = base64;
    target.appendChild(img);

		// Show element
    var area = document.createElement('textarea');
    area.value = img.outerHTML; 
    target.appendChild(area);
    
    // show string length
    var p = document.createElement('p');
    p.innerText = img.outerHTML.length;
    target.appendChild(p);
  };

	proc.func(url, callback, 'data:image/png;');
});