少侠,留步,图片预览术

栏目: JavaScript · 发布时间: 6年前

内容简介:少年,我看你骨骼精奇,是万中无一的武学奇才,我这有本《图片流》秘籍,见与你有缘,就送于你了。本文所说的图片流就是读取本地图片,并在页面使用文件流的方式显示出来。首先,我们简单说下文件上传的几种方式, 然后依次来实现它们

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

图片流

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

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

上传方式

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

复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人人时代(经典版)

人人时代(经典版)

[美] 克莱•舍基(Clay Shirky) / 胡泳、沈满琳 / 浙江人民出版社 / 2015-6 / 54.90元

[内容简介] 一而再,再而三出现的公众事件,绝不仅是来自草根的随兴狂欢,而是在昭示着一种变革未来的力量之崛起!基于爱、正义、共同的喜好和经历,人和人可以超越传统社会的种种限制,灵活而有效地采用即时通信、移动电话、网络日志和维基百科等新的社会性工具联结起来,一起分享、合作乃至展开集体行动。人人时代已经到来。 微软、诺基亚、宝洁、BBC、乐高、美国海军最推崇的咨询顾问,“互联网革命最伟大的......一起来看看 《人人时代(经典版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具