图片流

前端所说的图片流就是读取本地图片，并在页面使用文件流的方式显示出来。

首先，我们简单说下文件上传的几种方式

上传方式

input

通过用户点击，创建,并监听change事件获取file对象，大体如下

click = () => {
    let input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    
    input.onchange = event => {
        let file = event.target.files[0]
    }
    
    input.click()
    
}

Drag && drop

使用HTML5的拖放API，监听元素的drop事件，同样是获取file对象

会创建一个DataTransfer对象,下面我们还会遇到它，稍后再说

dragover = event => {
   event.preventDefault()
}

drop = event => {
    event.preventDefault()
    let files =  event.dataTransfer.files
}

paste

给元素绑定粘贴事件，得益于contenteditable我们可以给所有元素添加，涛声依旧，获取event中包含的file

paste = (e) => {
    e.preventDefault()
    let file = e.clipboardData.files[0]
}

clipboardData

paste事件提供了一个clipboardData属性，是一个DataTransfer类型的对象，前面我们说到，拖放会产生一个DataTransfer对象，没错，粘贴也是它。

来来来，掀起了她的盖头来。

01.jpg

上面可以看到，clipboardData有如下属性

dropEffect 默认是node
effectAllowed 默认是uninitialized
files 本地文件列表
items 剪切板中的各项数据
types 剪切板中的各项数据类型

我们只需要使用files即可，图片文件在它里面

文件格式

file

通常情况下， File 对象是来自用户在一个元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的DataTransfer对象，继承于Blob

庐山真面目，诺，就是这个样子。

02.jpg

可以看到有如下属性：

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例。

我们不去深究file对象，只需要知道通过它可以访问本地的文件。

blob

一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

创建blob对象

var aBlob = new Blob( array, options );

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob.
options 是一个可选的Blob熟悉字典，它可能会指定如下两种属性
- type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
- endings，默认值为”transparent”，它代表包含行结束符\n的字符串如何被输出。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

03.jpg

通过动态创建blob，我们可以实现纯前端下载

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${new Date().valueOf()}.doc`;
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);

Blob URL

Blob URL是blob协议的URL，格式如下

blob:http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330

Blob URL可以通过URL.createObjectURL(blob)创建, 在每次调用createObjectURL()方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。

在不需要这些URL对象的时候，通过URL.revokeObjectURL(objectURL) 释放URL对象

使用Blob URL进行显示本地图片，我们只需要把创建的URL赋值给img的src属性就可以了。

05.jpg

FileReader

FileReader用来读取file或blob文件数据，基于文件大小不同，读取的过程为异步。

let render = new FileReader()
render.onload = () => {
    let src = render.result
}
render.readAsDataURL(file)

FileReader读取文件方法

readAsBinaryString file 将文件读取为二进制编码
readAsBinaryArray file 将文件读取为二进制数组
readAsText file[, encoding] 按照格式将文件读取为文本，encode默认为UTF-8
readAsDataURL file 将文件读取为DataUrl

base64

使用FileReader进行文件的读取，就可以将图片读取成base64格式的了。

04.jpg

直接在FileReader实例的onload函数里面将result赋值给src即可

格式差异

其实主要是两种格式base64和blob，它们之间的差异如下

Blob URL的长度一般比较短
Blob URL可以方便的使用XMLHttpRequest获取源数据， base64不是所有浏览器都支持
Blob URL 只能在当前应用内部使用

格式之间转换

canvas转为blob对象

canvas.toBlob(function (blobObj) {
    console.log(blobObj)
})

canvas转为base64

let imgSrc = canvas.toDataURL('image/png')

base64转为blob

function dataURLtoBlob(dataurl) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}

图片处理

图片流