在前端使用base64的方法展示图片

<script type="text/javascript">
	// 注意图片的路由必须是在服务器上的图片
	var imgurl = "http://localhost:8888/img/1.jpg"
	var base64 = ''
	// 新建一个image对象
	var image = new Image();
	image.src = imgurl;
	// 设置跨域问题
	image.crossOrigin = 'anonymous';
	// 确保图片加载成功后在进行编码操作
	image.onload = function(){
		base64 = base64 + getBaseImage(image);
		// 把base64的值给img里面的url
	}
	// 等页面在加载完毕后，给img的标签的src进行赋值操作
	window.onload = function(){
		var img = document.getElementsByTagName('img');
		img[0].src=base64
		
	}
	
	
	function getBaseImage(img){
		// 创建画布  这里的canvas的值是死的
		var canavs = document.createElement('canvas');

		// 设置画版的宽和高
		canavs.width = img.width;
		canavs.height = img.height;

		// 使用2D环境来绘制平面图片
		var ctx = canavs.getContext("2d");
        
		// 绘制图片
		ctx.drawImage(img,0,0,img.width,img.height); // 参数：图片对象，x轴的起止，y轴的起止，y轴的结束，x轴的结束

		// 获取拓展名
		var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();

		// 将图片变成base64的图片
		// 注意，确保图片加载成功后才可以进行转换
		var dataurl = canavs.toDataURL('images' + ext)
		return dataurl
	}
</script>