少侠，留步，图片预览术

少年，我看你骨骼精奇，是万中无一的武学奇才，我这有本《图片流》秘籍，见与你有缘，就送于你了。

图片流

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

首先，咱们简单说下文件上传的几种方式, 而后依次来实现它们

上传方式

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

复制代码

参考

前端利用Blob对象建立指定文件并下载

DataURL 与 File,Blob,canvas 对象之间的互相转换

结尾

文本完整代码，请戳github

各位，周末快乐。