[javascript]使用javascript將圖片轉為DataURL

[tim]

利用 canvas 的 toDataURL() function, 將圖片轉為 DataURL, 用以快取在 localStorage 或轉為字串(序列化)使用!

請參考: http://appcropolis.com/javascript-encod ... s-dataurl/

代碼: 選擇全部

/**
 * Converts image URLs to dataURL schema using Javascript only.
 *
 * @param {String} url Location of the image file
 * @param {Function} success Callback function that will handle successful responses. This function should take one parameter
 *                            <code>dataURL</code> which will be a type of <code>String</code>.
 * @param {Function} error Error handler.
 *
 * @example
 * var onSuccess = function(e){
 * 	document.body.appendChild(e.image);
 * 	alert(e.data);
 * };
 *
 * var onError = function(e){
 * 	alert(e.message);
 * };
 *
 * getImageDataURL('myimage.png', onSuccess, onError);
 *
 */
function getImageDataURL(url, success, error) {
	var data, canvas, ctx;
	var img = new Image();
	img.onload = function(){
		// Create the canvas element.
	    canvas = document.createElement('canvas');
	    canvas.width = img.width;
	    canvas.height = img.height;
		// Get '2d' context and draw the image.
		ctx = canvas.getContext("2d");
	    ctx.drawImage(img, 0, 0);
		// Get canvas data URL
		try{
			data = canvas.toDataURL();
			success({image:img, data:data});
		}catch(e){
			error(e);
		}
	}
	// Load image URL.
	try{
		img.src = url;
	}catch(e){
		error(e);
	}
}