Web 网页图片预览术

Question

本文所说的图片流就是读取本地图片，并在页面使用文件流的方式显示出来。首先，我们简单说下文件上传的几种方式，然后依次来实现它们

上传方式

input

通过用户点击，创建 <input type="file" accept="image/*"/>，并监听 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 对象，没错，粘贴也是它。clipboardData 有如下属性

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

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

文件格式

file

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

• 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);

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

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${Date.now()}.doc`;
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
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 属性就可以了。

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 格式的了。直接在 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 }); }

文本完整代码，请戳 github