通过 imgsrc 将图片装成 base64

function getVagueImage(imgSrc) {
	return new Promise((resolve) => {
		let imgWrap = new Image();
		imgWrap.crossOrigin = 'Anonymous';
		imgWrap.src = imgSrc;
		imgWrap.onload = function() {
			let canvas = document.createElement('canvas');
			canvas.width = imgWrap.width;
			canvas.height = imgWrap.height;
			canvas.getContext('2d').drawerImage(imgWrap, 0 , 0, canvas.width, canvas.height);
			let dataUrl = canvas.toDataUrl("image/png")
			resolve(dataUrl)
		imgWrap.onerror = function() {
			console.log('图片出错')
将 base64 装换成 文件格式
 
getVagueImage(imgSrc).then(base => {
	let bytes = window.atob(base.split(",")[1]);
	let bytesLen = bytes.length;
	let uint = new Uint8Array(bytesLen); //Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素
	for(let j = 0; j < bytes.length; j++) unit[j] = bytes.charCodeAt(j);	//charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
	let file = new Blob([unit], { type: "image/png" })
图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址
1. 提升性能: 网页上的每一个图片，都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，base64可以随着 HTML 的下载同时下载到本地
                                    项目里面有些模块会图片显示功能，一般情况下我们都是将文件以jpg/png格式上传到项目中，再在代码中把img的src属性改成图片的路径就能正常显示了，但是某些情况下不需要以文件形式存放图片文件，需要将图片以字符串格式保存到数据库中要怎么办呢？这时候可以考虑将图片转成base64字符串格式，这样就可以很方便保存跟引用了，当然文件大小尽量控制小一些，不然转成base64后长度会很长。下面介绍两种常规将...
                                    后端给了一个图片url：http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg
但是我们想通过axios来进行请求：
        axios
          .get(
            "http://localhost:3003/images/0df7f084788cc336e5fb2b2b4e708ed8bgc.jpg",
          .then(res
    @RequestMapping("/baseImage")
    @ResponseBody
    public String test(@RequestPart("file") MultipartFile file) throws Exception {
        BASE64Encoder base64Encoder = new BASE64Encoder();
        String base64EncoderImg = file.getO
                                    dataURL本质上是一个固定格式的字符串，这个字符串可以直接替代url，文件或图片数据不用从远程服务器上去拿，可以让图片直接在前端进行处理。而base64就是dataurl的一种编码方式。