注：相关链接《10分钟教会你原生JS压缩图片，极其精简版》
- 什么是base64格式？说到底就是一串字符串，形如data:image/png;base64,iVBORwO…开头的字符串
- 原本在网页中嵌入一个图片是这样的
<img src="photo.png">- 使用了base64格式后变成
<img src="https://img-blog.csdnimg.cn/2022010613345082801.png">- 所以，通过FileReader对象就可以把图片变成base64格式，内嵌至网页中，这样就可以减少对服务器的请求，不过网页体积变大，这个方法适用于嵌入小张图片
1.核心使用方法（这是固定搭配）
let fileObj = document.getElementById('file').files[0] //获取文件对象
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(fileObj) //将读取的文件转换成base64格式
reader.onload = function(e) {
console.log(e.target.result) //转换后的文件数据存储在e.target.result中
}
//onload在readAsDataURL执行后执行
2.最精简的一个demo(复制到html文件就能运行)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>压缩图片demo</title>
</head>
<body>
<img id="img" src="">
<input id="file" type="file" onchange="Tobase64()">
</body>
<script>
//转换格式为base64
function Tobase64() {
let fileObj = document.getElementById('file').files[0] //获取文件对象
let reader = new FileReader() //新建一个FileReader对象
reader.readAsDataURL(fileObj) //将读取的文件转换成base64格式
reader.onload = function(e) {
document.getElementById('img').src = e.target.result //将img标签的src换成base64格式，并显示出来
}
}
</script>
</html>
2465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
