使用HTML5的FileReader对象将图片转化成base64格式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yasha97/article/details/83629057

注:相关链接《10分钟教会你原生JS压缩图片,极其精简版》

  1. 什么是base64格式?说到底就是一串字符串,形如data:image/png;base64,iVBORwO…开头的字符串
  2. 原本在网页中嵌入一个图片是这样的<img src="photo.png">
  3. 使用了base64格式后变成<img src="data:image/png;base64,iVBORw0...">
  4. 所以,通过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>
展开阅读全文

没有更多推荐了,返回首页