Blob和File研究

知识点介绍

一、了解base64和blob

1、base64

Base64就是一种基于64个可打印字符来表示二进制数据的表示方法

Base64编码是从二进制到字符的过程.

Base64编码主要用在传输、存储、表示二进制等领域，还可以用来加密，但是这种加密比较简单.

[参考地址：知乎]（www.zhihu.com/question/38…)

2、blob

二进制大对象，是一个可以存储二进制文件的容器

二、图像的数据类型

1、DOM

<img>

元素从 URL（Data URL，HTTP URL 或 Object URL）加载图像。

元素通过 canvas API drawImage 来获取元素上的图像数据。

2、URL

httpUrl、dataUrl、objectUrl

3、文件

blob

是带有二进制数据的类文件对象。它包含一个只读的 size 属性和一个只读的 type 属性。你可以通过 slice，stream，text 等方法来读取二进制数据

file

一个 File 对象是一个特殊的 Blob 对象。除了 Blob 的属性和方法外，File 对象还包含 lastModified，name 等属性。

一个 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

HTTP URL 代表存储在服务器上的图像。HTTP URL 用于从服务器获取图像数据

示例 http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

2、dataUrl

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

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数据

new Blob(array, options)

let hiBlob = new Blob([`<h1>Hi gauseen!<h1>`], { type: 'text/html' })

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)
  })

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数据

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' })

inputElement.files(标签元素获取，点击选择、拖拽、复制粘贴)

// input 上传文件时触发 change 事件
$('input').addEventListener('change', e => {
  let file = e.target.files[0]
  console.log('file: ', file)
})