场景一:项目assets资源里面的图片本地图片
//项目本地assets资源得本地图片
function imgToBase64(url) {
const image = new Image();//创建一个图像对象
image.src = url;//在IE游览器src不能在onload事件得前面
image.onlood = () => {
//当image加载完毕后执行得事件
const convas = document.createElement('canvas');
canvas.width = image.naturalWidth;
canvas.height = image.naturalHeight;
//naturalHeight是元素的自然宽度,它永远不会改变。例如,即使使用 CSS 或 JavaScript
//调整图像大小,100px 宽的图像的自然宽度始终为 100px。
canvas.style.width = `${
convas.width / window.devicePixelRatio}px`;//window.devicePixelRatio是设备像素比
canvas.style.height = `${
convas.height / window.devicePixelRatio}px`;
const ctx = canvas.getContext('2d')
//Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。Context 对象就是 JavaScript 操作 Canvas 的接口。
//使用[CanvasElement].getContext('2d')来获取 2D 绘图上下文
if(!ctx){
return null;
}
ctx.drawImage(image,0,0);
const base64 = canvas.toDataURL('image/png');
//canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。
//可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
return base64;
}
}
//引入项目图片
const imgUrl = require('./images/error.png');
const res = imgToBase64(imgUrl);
console.log('生成base64的图片',res)
场景二:有一个公开的url,比如https//xx.png 或者项目public目录下的图片
- 使用 ajax + FileReader
- ajax 异步请求使用XMLHttpRequest、fetch、axios都可以
- 需要将请求的返回格式 responseType 转成 Blob 格式
- 这种方法也适用于文件转成 base64
getBase64(imgUrl) {
let xhr = new XMLHttpRequest();
xhr.open('get', '/xxx.jpg', true);
// 重点1
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response;
// 重点2
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
// 结果
const base64 = e.target.result
};
oFileReader.readAsDataURL(blob);
}
};
xhr.send();
},
使用 fetch api请求,大同小异,重点都是 responseType 要设置为blob,再使用 FileReader 的 readAsDataURL 方法把 blob 转成 base64。
function getBase64(imgUrl) {
var xhr = new XMLHttpRequest();
fetch(imgUrl, {
responseType: 'blob'
})
.then(response => {
return response.blob();
})
.then(blob => {
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
// base64结果
const base64 = e.target.result
};
oFileReader.readAsDataURL(blob);
});
},