-
-
Save bhupal4all/1de377ab0dabcb6c4aaea71f93914e4b 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