guneysus
12/18/2014 - 9:38 PM

image_to_base64url.js

/**
 * Converts an image to
 * a base64 string.
 * 
 * If you want to use the 
 * outputFormat or quality param
 * I strongly recommend you read the docs 
 * @ mozilla for `canvas.toDataURL()`
 * 
 * @param 	{String} 	url
 * @param 	{Function}	callback
 * @param 	{String}	[outputFormat='image/png']
 * @param 	{Float}   	[quality=0.0 to 1.0]
 * @url 	https://gist.github.com/HaNdTriX/7704632/
 * @docs 	https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement#Methods
 * @author 	HaNdTriX
 * @example
 * 			imgToDataURL('http://goo.gl/AOxHAL', function(err, base64Img){
 * 				console.log('IMAGE:',base64Img);
 * 			})
 */
function imgToDataURL(url, callback, outputFormat, quality) {
	var canvas = document.createElement('CANVAS'),
		ctx = canvas.getContext('2d'),
		img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function() {
		var dataURL;
		canvas.height = img.height;
		canvas.width = img.width;
		try {
			ctx.drawImage(img, 0, 0);
			dataURL = canvas.toDataURL(outputFormat, quality);
			callback(null, dataURL);
		} catch (e) {
			callback(e, null);
		}
		canvas = img = null;
	};
	img.onerror = function() {
		callback(new Error('Could not load image'), null);
	};
	img.src = url;
}