从 HTML image(img) 中获取 base64数据的函数封装（解决异步和跨域问题）

 从 HTML image(img) 中获取 base64数据的函数封装：

getImageBase64Data = function(imgSrc) {
		function getBase64(img) {

			var canvas = document.createElement("canvas");
			canvas.width = img.width;
			canvas.height = img.height;

			var ctx = canvas.getContext("2d");
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			var dataURL = canvas.toDataURL('image/jpeg');
			return dataURL;
		}

		var p = new Promise(function(resolve, reject) {
			var image = new Image();
			image.crossOrigin = 'Anonymous';
			image.src = imgSrc; 

			image.onload = function() {
				
				var imageBase64Data = getBase64(image);
				
				resolve(imageBase64Data);
			}
		});
		return p;

	};

 

var getImageBase64DataPromise=getImageBase64Data("http://127.0.0.1:8080/img/00001.jpg");
getImageBase64DataPromise.then(function(imageBase64Data){
   //imageBase64Data 为图片http://127.0.0.1:8080/img/00001.jpg的 base64信息
   console.log(imageBase64Data);
});

1、异步的问题

     图片的base64信息在 onload 事件中通过canvas 获取，onload 事件为异步，为了实现 base64信息获取代码能重用并和后处理的代码解耦，引入了 Promise 的异步机制。

2、跨域问题

图片的 src为http://127.0.0.1:8080/img/00001.jpg，如果当前域名不为127.0.01:8080，存在跨域问题。

1）在 执行canvas.toDataURL会报错：Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

解决方法：必须增加这一行：image.crossOrigin = 'Anonymous';

toDataURL的问题解决后，请确保图片 src 指向的服务端是支持跨域的。

2）本人采用 spring boot 作为图片的服务器端，遇到了 spring boot 关于静态文件跨域配置的问题。

解决方法：请见《spring boot 关于静态资源跨域配置》