vue.js 实现图片本地预览 裁剪 压缩 上传功能
作者:siwuxie 发布时间:2024-05-11 09:11:06
以下代码涉及 Vue 2.0 及 ES6 语法。
目标
纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式、长宽、大小的检测,减少浏览器交互。
现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释。
代码结构
<div id="wrap">
<label>
点我上传图片
<input type='file' @change="change" ref="input">
</label>
<img :src="src" ref="img">
</div>
new Vue({
el: '#wrap',
data: {
// 一张透明的图片
src:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
elInput: null
},
methods: {
change(e){
// ...
}
}
})
如何获取图片大小
现代浏览器中十分简单
function getSize(e){
return e.target.files[0].size;
}
但 ie9 下暂时没有找到纯 JS 的方案。
因此,在需要判断大小时,遇到 ie9 直接绕过不去判断
如何预览本地图片
const refs = this.$refs
const elInput = refs.input
const elImg = refs.img
现代浏览器中,通过调用 FileReader 读取本地图片,将图片地址转成 Base64 格式实现预览。
function getSrc(){
const reader = new FileReader();
reader.onload = (e) => {
const src = e.target.result;
elImg.src = src;
};
if (elInput.files && elInput.files[0]) {
reader.readAsDataURL(elInput.files[0]);
}
}
但是问题又来了,ie9 并不支持 FileReader,但可以通过 ie 滤镜显示。
function getSrc(){
elInput.select();
elInput.blur();
const src = document.selection.createRange().text;
document.selection.empty();
elImg.style.filter = `progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='${src}')`;
}
滤镜中 sizingMethod='scale'
的写法是为了图片能适应内容缩放。
由于 IE9 对安全限制有所增强,实践中会遇到以下两个问题:
如果 file 控件获得焦点,则 document.selection.createRange()
拒绝访问,因此需要在 elInput.select()
后面加一句 elInput.blur()
即可。
为了让上传按钮更美观,默认给 input[type=file]
的设置了样式 visible:hidden
,这样会导致 ie9 下报错。应该会被浏览器认为欺骗用户点击,只好曲线救国。
label{
overflow:hidden;
}
label input[type='file']{
position:absolute;
top:9999px;
left:9999px;
}
如何获取图片长宽
同理,利用 ie 滤镜和 FileReader 的方案对 ie9 和非 ie9 分别实现。
ie9 的方案
参数 src 接受的是本地图片路径
let tempEl;
const getSizeIncompatible = (src, callback) => {
if (!tempEl) {
tempEl = document.createElement('div');
tempEl.style.position = 'absolute';
tempEl.style.width = '1px';
tempEl.style.height = '1px';
tempEl.style.left = '-9999px';
tempEl.style.top = '-9999px';
tempEl.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)';
document.body.insertBefore(tempEl, document.body.firstChild);
}
tempEl.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
callback(tempEl.offsetWidth, tempEl.offsetHeight);
};
其中 sizingMethod='image'
是为了图片显示原始大小。
非 ie9 方案
参数 src 接受的是 base64 编码后的图片路径
const getSize = (src, callback) => {
const image = new Image();
image.onload = () => {
callback(image.width, image.height);
};
image.src = src;
};
参考
https://elemefe.github.io/ima...
总结
以上所述是小编给大家介绍的vue.js 实现图片本地预览 裁剪 压缩 上传功能网站的支持!
来源:https://segmentfault.com/a/1190000008019773
猜你喜欢
- 前言最近发现CentOS 7下升级MySQL5.7.23的一个坑,以前面升级到MySQL 5.7.23的一个集群为例在我们环境下打开文件描述
- 前言这篇博文发布后,有朋友问有没有SQL server版本的,现在有了==》传送门一、场景再现在一个erp进销存系统或0A等其他系统中,如果
- 目录一、运行效果二、实现方法1. 爬虫部分2.Tkinter部分三、打包四、代码获取今天咱们用Python爬虫和Tkinter界面来做一个翻
- 起步Python3 起,str 就采用了 Unicode 编码(注意这里并不是 utf8 编码,尽管 .py 文件默认编码是 utf8 )。
- 即使在urlencode之前str.decode(“cp936″).encode(“utf-8″)做了编码转换也是没用的。后来查询手册查到一
- 1. lock互斥锁知识点:lock.acquire()# 上锁lock.release()# 解锁#同一时间允许一个进程上一把锁 就是Lo
- Template无疑是一个好东西,可以将字符串的格式固定下来,重复利用。同时Template也可以让开发人员可以分别考虑字符串的格式和其内容
- Django中Models是什么:通常,一个Model对应一张数据表,Django中Models以类的形式表现,它包含一些基本字段以及数据的
- 前言这几年对运维人员来说最大的变化可能就是公有云的出现了,我相信可能很多小伙伴公司业务就跑在公有云上, 因为公司业务关系,我个人
- 一、文件形式的邮件#!/usr/bin/env python3#coding: utf-8import smtplibfrom email.
- 前言昨天才开始接触,鼓捣了一个下午,接下来会持续更新,如果哪里有错误的地方,望各位大佬指出,谢谢!数据描述两个文件,一个文件包含了网络图的节
- 合并:torch.cat(inputs=(a, b), dimension=1)e.g. x = torch.cat((x,y), 0) 沿
- 任何位置都能明确“我在哪里?这里有什么?从这里能去哪里?” 小时候,童话故事都告诉我们,迷路可不是一件好事。那会伴随着困惑、沮丧、
- 在排除网络和环境配置问题后,如果发现本地调试比较快,而部署到服务器就会出现卡顿现象,可以检查下在上传服务器时,是否将连接mysql 的IP改
- 一.字典的基本方法1.新建字典1)、建立一个空的字典>>> dict1={} >>> dict2=dic
- psutil是一个跨平台进程和系统监控的Python库,而gopsutil是其Go语言版本的实现。本文介绍了它的基本使用。Go语言部署简单、
- 非常不错,大家可以自己应用下。<% '//数据处理部分 dim Content,Num,I,st
- 1. 先介绍几个常用的 MySQL 函数RAND() 随机生成 0~1 之间的小数(0<1)CEI
- python删除某个目录文件夹及文件的方法:#!/usr/bin/env pythonimport osimport shutildelLi
- 正在看的ORACLE教程是:Oracle9iPL/SQL编程的经验小结。平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它