//======================================== // 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;'); });
<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>
body { background-color: #FFF; } .container { margin : 20px 30px; padding: 10px; background-color: #F3F5F6; } h2 { font-size: 1.3em; } textarea { width : 100%; height: 50px; }