## 相关知识点
 
* 1、了解base64和blob
* 2、图像的数据类型
* 3、了解httpUrl、dataUrl、objectUrl(blobUrl)
* 4、了解Blob、File、BlobURL、DataURL之间的关系以及互相转换
* 5、如何获取Blob数据和File数据
 
## 知识点介绍
 
### 一、了解base64和blob
#### 1、base64
>Base64就是一种 基于64个可打印字符来表示二进制数据的表示方法
>Base64编码是从二进制到字符的过程.
>Base64编码主要用在传输、存储、表示二进制等领域，还可以用来加密，但是这种加密比较简单.
[参考地址：知乎]（如何用通俗易懂的语言解释base64?)
#### 2、blob
>二进制大对象，是一个可以存储二进制文件的容器
 
### 二、图像的数据类型
#### 1、DOM
[<img>](<img>：图像嵌入元素)
元素从 URL（Data URL，HTTP URL 或 Object URL）加载图像。
[<canvas>](<canvas>)
元素通过 canvas API drawImage 来获取 <img> 元素上的图像数据。
#### 2、URL
httpUrl、dataUrl、objectUrl
#### 3、文件
##### [blob](Blob)
是带有二进制数据的类文件对象。它包含一个只读的 size 属性和一个只读的 type 属性。你可以通过 slice，stream，text 等方法来读取二进制数据
##### [file](File)
一个 File 对象是一个特殊的 Blob 对象。除了 Blob 的属性和方法外，File 对象还包含 lastModified，name 等属性。
##### [ImageData](ImageData)
一个 ImageData 对象是一个 JavaScript 对象，包含 width，height 和 data 属性，分别表示图像宽度，高度和像素数据。 data 属性是一个一维数组，包含 R，G，B，A，R，G，B，A 这样格式的数据。每个 R，G，B，A 代表一个像素。可以通过 <canvas> API createImageData 或 ImageData 构造函数来创建 ImageData。
##### [Buffer]()
1、ArrayBuffer 是在浏览器中唯一一种访问二进制数据的方法。ArrayBuffer 代表图像的原始二进制数据缓冲区。我们无法读取和写入 ArrayBuffer ，只能将 ArrayBuffer 转换为 DataView 或 TypedArray 来读取和写入二进制数据。
2、Buffer 是 Node.js 中特殊的一种 Uint8Array，Node.js 对其进行了一些优化。
 
### 三、了解httpUrl、dataUrl、objectUrl(blobUrl)
#### 1、[httpUrl](什么是URL？)
>HTTP URL 代表存储在服务器上的图像。HTTP URL 用于从服务器获取图像数据
>示例
`http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument`
#### 2、[dataUrl](Data URLs)
>Data URL 带有 base64 编码的图像数据。可以从 Data URL 数据中解码出图像的二进制数据。Data URL 数据的大小比原始的二进制数据大一些。
```
下面是一些示例：
data:,Hello%2C%20World!
简单的 text/plain 类型数据
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
上一条示例的 base64 编码版本
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
一个HTML文档源代码 <h1>Hello, World</h1>
data:text/html,<script>alert('hi');</script>
一个会执行 JavaScript alert 的 HTML 文档。注意 script 标签必须封闭。
```
#### 3、[objectUrl](URL.createObjectURL())
>Object URL 用来代表存储在浏览器内存中的 File 或 Blob 对象。Object URL 可以由createObjectURL API 来创建，并由 revokeObjectURL API 释放。
 
### 四、了解Blob、File、BlobURL、DataURL之间的关系以及互相转换
#### 1、blob的作用
#### 2、File的获取和转化成url的方式
#### 3、Blob和File的关系
#### 4、转换关系
* Blob --> File
* File --> DataURL（base64）
* File --> BlobURL
* HTTPURL| DataURL | BlobURL --> Blob
 
### 五、如何获取Blob数据和File数据
#### 1、获取Blob数据
>1) new Blob(array, options)
```
let hiBlob = new Blob([`<h1>Hi gauseen!<h1>`], { type: 'text/html' })
```
>2) fetch(url)
fetch(url, options)
* url可以是httpUrl/dataUrl/ObjectUrl
* res.arrayBuffer(): 通用、固定长度的原始二进制数据缓冲区
* res.blob(): Blob 类型
* res.formData(): 表单数据类型
* res.json(): JSON 格式
* res.text(): 文本格式
```
// 获取图片的 blob 对象
// 通过 http、https 获取
fetch('http://eg.com/to/path/someImg.png')
.then(res => res.blob())
.then(blob => {
console.log('blob: ', blob)
})
```
>3) canvasElement.toBlob(callback)
```
<body>
<canvas width="100" height="100"></canvas>
</body>
<script>
const $ = arg => document.querySelector(arg)
let convas = $('canvas')
// async 自执行函数
(async () => {
let imgUrl = 'http://eg.com/to/path/someImg.png'
let ctx = convas.getContext('2d')
let img = await fetchImg(imgUrl)
// 向 canvas 画布上下文绘制图片
ctx.drawImage(img, 0, 0)
// 获取图片 blob 对象
convas.toBlob((blob) => {
console.log('blob: ', blob)
})
// 获取图片 dataURL，也是 base64 格式
let dataURL = convas.toDataURL()
console.log('dataURL: ', dataURL)
})()
// 获取图片资源，封装成 promise
function fetchImg (url) {
return new Promise((resolve, reject) => {
let img = new Image()
// 跨域图片处理
img.crossOrigin = 'anonymous'
img.src = url
// 图片资源加载完成回调
img.onload = () => {
resolve(img)
}
})
}
</script>
```
#### 2、获取File数据
>1) new File(bits, name[, options])
```
// 1. 参数是字符串组成的数组
let hiFile = new File([`<h1>Hi hello!<h1>`], 'fileName', { type: 'text/html' })
// 2. blob 转 file 类型
let hiBlob = new Blob([`<h1>Hi hello!<h1>`], { type: 'text/html' })
let hiFile = new File([ hiBlob ], 'fileName', { type: 'text/html' })
```
>2) inputElement.files(标签元素获取，点击选择、拖拽、复制粘贴)
```
// input 上传文件时触发 change 事件
$('input').addEventListener('change', e => {
let file = e.target.files[0]
console.log('file: ', file)
})
```
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
