js通过图片url获取图片base64编码

方法1：直接返回图片编码

• 参数url：图片的路径 ；
• 参数imgType：图片类型默认image/png；
• 方法返回值：图片base64编码

function getBase64ImageUrl(url, imgType) {
	if(!imgType){
	  imgType="image/png";
	}
	var img=new Image(); 
	img.src= url;
	img.crossOrigin="anonymous";
	var xhr = new XMLHttpRequest();
	//通过下面两次同步请求获取同一个图片，如果请求成功来猜测上面的图片已经异步加载完成
	for(var i=0;i<2;i++){
		xhr.open('GET', url, false);
		xhr.send(null);
	}
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");  
	ctx.drawImage(img, 0, 0);
	var dataURL = canvas.toDataURL(imgType);
	return dataURL;
}

方法2：回调方法获取

• 参数url：图片的路径 ；
• 参数callBack：回调函数；回调函数的参数只有一个为：图片base64编码；
• 参数imgType：图片类型默认image/png；
• 方法返回值：无返回值；

function getBase64ImageUrl(url, callBack, imgType) {
	if(!imgType){
	  imgType="image/png";
	}
	var img=new Image(); 
	img.src= url;
	img.crossOrigin="anonymous";
	img.onload=function(){
		var canvas = document.createElement("canvas");
		var ctx = canvas.getContext("2d");  
		ctx.drawImage(img, 0, 0);
		var dataURL = canvas.toDataURL(imgType);
		callBack(dataURL);
	}
}

方法3：回调方法获取

• 参数url：图片的路径 ；
• 参数callBack：回调函数；回调函数的参数只有一个为：图片base64编码；
• 参数imgType：图片类型默认image/png；
• 方法返回值：无返回值；

function getBase64ImageUrl(url,callBack,imgType){
	if(!imgType){
	  imgType="image/png";
	}
	var xhr = new XMLHttpRequest();
	xhr.responseType="arraybuffer";
	xhr.open('GET', url, true);
	xhr.onload=function(){
		var result=xhr.response;
		var file = new File([result], "foo."+imgType.match(/\/([A-Za-z]+)/)[1], {
		  type: imgType,
		});
		var reader = new FileReader();
		reader.onload = function(evt) {
			callBack(evt.target.result);
		};
		reader.readAsDataURL(file)
	}
	xhr.send(null);
}

注意：以上两种方法获取的图片base64编码并不是纯净的，实际上是"data:image/png;base64,"+图片base64编码;其中image/png;也可能是其他图片类型，如有需要请自行截掉前面部分"data:image/png;base64,"；

个人建议使用方法2和方法3获取；