JS：前端二进制

1、本地图片 File 对象转换为 Data URL

<input type="file" accept="image/*" onchange="loadFile(event)" />
<img id="image" />

<script> function loadFile(event) { const reader = new FileReader(); reader.onload = function () { const image = document.querySelector("#image"); image.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }
</script>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

读取图片

<img id="image" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD">


  

 

  
1
  
2
 

2、Base64

btoa Binary-to-ASCII
atob ASCII-to-Binary

console.log(btoa('BC')); // QkM=
console.log(atob('QkM=')); // BC

  

 

  
1
  
2
 

3、fetch API 从网络上获取图片

<img id="image" />

<script> const image = document.querySelector("#image"); fetch("https://avatars3.githubusercontent.com/u/4220799") .then((response) => response.blob()) .then((blob) => { const objectUrl = URL.createObjectURL(blob); image.src = objectUrl; });
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

读取图片

<img id="image" src="blob:http://127.0.0.1:5500/83dcb9c8-ffd3-4b5d-98a5-e3f6ff890bf2">

  

 

  
1
 

Blob（Binary Large Object）表示二进制类型的大对象

const blob = new Blob(['hello'])

  

 

  
1
 

参考
前端二进制

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/109508241