少侠,留步,图片预览术
少年,我看你骨骼精奇,是万中无一的武学奇才,我这有本《图片流》秘籍,见与你有缘,就送于你了。
图片流
本文所说的图片流就是读取本地图片,并在页面使用文件流的方式显示出来。
首先,我们简单说下文件上传的几种方式, 然后依次来实现它们
上传方式
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
各位,周末快乐。
少侠,留步,图片预览术相关推荐
- dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件(巨详细)
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
- 实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能: 扫码查看示例效果: ...
- h5 img js 点击图片放大_H5实现移动端图片预览:手势缩放, 手势拖动,双击放大......
查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- html5 双指缩放图片,js实现移动端图片预览:手势缩放, 手势拖动,双击放大......
查看示例效果: 一.功能介绍 图片预览主要有以下几个功能点组成:监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击...) 监听图片手势事件,通过 transform-mat ...
- 图片预览小窗口html,jQuery和css3超酷图片预览插件
这是一款使用css3和Velocity.js制作的jquery图片预览插件. 电子商务网站设计的宗旨是通过简化的设计提高用户体验,提高转化率也有一定的模式.另外一种模式是在需要的地方提供更多的信息来达 ...
- uniapp 实现图片预览 单图预览和多图预览
uniapp 实现图片预览 单图预览和多图预览 关键点就是调用 uni.previewImage({current: index,urls: photoList}); 如果是单图预览,current对 ...
- Vue 组件库 heyui@1.18.0 发布,新增地址选择、图片预览组件
开发四年只会写业务代码,分布式高并发都不会还做程序员? 新增 CategoryPicker 新增组件 CategoryPicker,地址级联组件的最佳方案. <CategoryPicker ...
最新文章
- C++ 命名空间 实战(一)
- JavaScript函数式编程之深入理解纯函数
- Java JSON对象怎么遍历_Java遍历JsonObject对象
- jQuery 基础教程 (五)之使用jQuery创建动画效果
- css图片自适应 有缝隙,有间隙,解决办法
- 关于使用SharedObject来缓存游戏图片或者swf文件资源到客户端本地的研究
- jsf 导航_JSF动作方法导航示例教程– from-action标记
- 【C++ 程序】 解线性方程组(Cramer法则)(分数形式结果)
- Python自动登录QQ空间
- 创建Substrate 私有网络
- 趋势丨关于未来世界的50个超级趋势
- DOORS入门教程系列:基本概念介绍(一)
- GUI提示功控件,LVGL『Label标签控件』介绍
- 牛逼了,利用Python实现“天眼系统”,只要照片就能了解个人信息
- 有关HTML的学习笔记
- 【DNS】Windows查看和清理DNS缓存
- 浪漫的的c语言编程,〖落拓素净〗C语言编程也可以很浪漫。。。。。。
- 【Pandas】根据某列分组求和
- 计算机电子琴谱小星星,小星星电子琴谱
- symfony学习笔记1—简介