-
-
Save yacafx/7938035e5a7a1b53faef993de906ecd0 to your computer and use it in GitHub Desktop.
convert image to base64
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* version1: convert online image | |
* @param {String} url | |
* @param {Function} callback | |
* @param {String} [outputFormat='image/png'] | |
* @author HaNdTriX | |
* @example | |
convertImgToBase64('http://goo.gl/AOxHAL', function(base64Img){ | |
console.log('IMAGE:',base64Img); | |
}) | |
*/ | |
function convertImgToBase64(url, callback, outputFormat){ | |
var img = new Image(); | |
img.crossOrigin = 'Anonymous'; | |
img.onload = function(){ | |
var canvas = document.createElement('CANVAS'); | |
var ctx = canvas.getContext('2d'); | |
canvas.height = this.height; | |
canvas.width = this.width; | |
ctx.drawImage(this,0,0); | |
var dataURL = canvas.toDataURL(outputFormat || 'image/png'); | |
callback(dataURL); | |
canvas = null; | |
}; | |
img.src = url; | |
} | |
/* | |
** version2: convert local image | |
*/ | |
function encodeImageFileAsURL(cb) { | |
return function(){ | |
var file = this.files[0]; | |
var reader = new FileReader(); | |
reader.onloadend = function () { | |
cb(reader.result); | |
} | |
reader.readAsDataURL(file); | |
} | |
} | |
/* | |
** version3: another local image convert | |
** add html: | |
** <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> | |
** <div id="imgTest"></div> | |
*/ | |
function encodeImageFileAsURL(){ | |
var filesSelected = document.getElementById("inputFileToLoad").files; | |
if (filesSelected.length > 0) | |
{ | |
var fileToLoad = filesSelected[0]; | |
var fileReader = new FileReader(); | |
fileReader.onload = function(fileLoadedEvent) { | |
var srcData = fileLoadedEvent.target.result; // <--- data: base64 | |
var newImage = document.createElement('img'); | |
newImage.src = srcData; | |
document.getElementById("imgTest").innerHTML = newImage.outerHTML; | |
alert("Converted Base64 version is "+document.getElementById("imgTest").innerHTML); | |
console.log("Converted Base64 version is "+document.getElementById("imgTest").innerHTML); | |
} | |
fileReader.readAsDataURL(fileToLoad); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment