方法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获取；
