场景一：将项目中的图片资源转为base64
function convertImgToBase64(url, callback) {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'anonymous';//解决Canvas.toDataURL 图片跨域问题
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
callback && callback(dataURL);
canvas = null;
};
img.src = url;
}
var baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
baseUrl = baseUrl
})
场景二：将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片资源转化成base64：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
</style>
</head>
<body>
<p><input type="file" id="upfile"></p>
<p><button id="upJS">用原生JS上传</button>
</div>
<script>
function imgFileTobase64() {
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var file = document.getElementById('upfile').files[0]
if (file) {
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert('上传失败，请上传不大于2M的图片！');
return;
} else {
//执行上传操作
alert(reader.result);
}
}
}
}
document.getElementById("upJS").onclick = function () {
imgFileTobase64()
}
</script>
</body>
</html>
