vue.js如何实现图片本地预览,裁剪、压缩,上传功能 - 行业资讯

　　介绍

小编给大家分享一下vue。js如何实现图片本地预览,裁剪、压缩,上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

<强>目标

纯javascrpit实现,兼容ie9及以上浏览器,在本地做好文件格式,长宽,大小的检测,减少浏览器交互。

现实是残酷的,为了兼容ie9还是用上了flash,第二篇来解释解释。

<强>代码结构

& lt; div id=皐rap"比; 　　,& lt; label> 　　点才能我上传图片　　& lt;才能input 类型=& # 39;文件# 39;,@change=癱hange", ref=癷nput"比; 　　,& lt;/label> 　　,& lt; img : src=皊rc", ref=癷mg"比; 　　& lt;/div> 　　Vue ({new 　　,el: & # 39; #包装# 39; 　　,数据:{//,才能一张透明的图片　　src才能:& # 39;数据:图像/gif; base64, R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7& # 39;,, 　　elInput才能:零　　}, 　　,方法:{ 　　改变才能(e) {//,,,… 　　,,} 　　,} 　　})

<>强如何获取图片大小

现代浏览器中十分简单

function getSize (e) { 　　,return e.target.files [0] .size; 　　}

但ie9下暂时没有找到纯JS的方案。

因此,在需要判断大小时,遇到ie9直接绕过不去判断

<>强如何预览本地图片

const refs 参美元=,这。　　const elInput =refs.input 　　参const elImg =,。img

现代浏览器中,通过调用FileReader读取本地图片,将图片地址转成Base64格式实现预览。

但是问题又来了,ie9并不支持FileReader,但可以通过即滤镜显示。

function getSrc () { 　　,elInput.select (); 　　,elInput.blur (); 　　,const src =, document.selection.createRange。text (); 　　,document.selection.empty ();=,elImg.style.filter “progid: DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=& # 39;规模# 39;,src=https://www.yisu.com/zixun/? {src}”)”; 　　}

滤镜中<代码> sizingMethod=& # 39;规模# 39;>

由于IE9对安全限制有所增强,实践中会遇到以下两个问题:

如果文件控件获得焦点,则<代码> document.selection.createRange() 拒绝访问,因此需要在<代码> elInput.select() 后面加一句<代码> elInput.blur() 即可。

为了让上传按钮更美观,默认给<代码>输入(type=文件)的设置了样式<代码>可见:隐藏> 标签{ 　　,溢出:隐藏; 　　} 　　label 输入(type=& # 39;文件# 39;){ 　　,位置:绝对; 　　,最高:9999 px; 　　,左:9999 px; 　　}

<>强如何获取图片长宽

同理,利用ie滤镜和FileReader的方案对ie9和非ie9分别实现。

<强> ie9的方案

参数src接受的是本地图片路径

let tempEl; 　　const getSizeIncompatible =, (src,回调),=祝辞,{ 　　,if (! tempEl), { 　　tempEl 才能=,document.createElement (& # 39; div # 39;); 　　时间=tempEl.style.position 才能;& # 39;绝对# 39;; 　　时间=tempEl.style.width 才能;& # 39;1 px # 39;; 　　时间=tempEl.style.height 才能;& # 39;1 px # 39;; 　　时间=tempEl.style.left 才能;& # 39;-9999 px # 39;; 　　时间=tempEl.style.top 才能;& # 39;-9999 px # 39;; 　　时间=tempEl.style.filter 才能;& # 39;progid: DXImageTransform.Microsoft.AlphaImageLoader (sizingMethod=图像)& # 39;; 　　document.body.insertBefore才能(tempEl, document.body.firstChild); 　　,} 　　,tempEl.filters.item (& # 39; DXImageTransform.Microsoft.AlphaImageLoader& # 39;) .src =, src; 　　,回调(tempEl.offsetWidth, tempEl.offsetHeight); 　　};

其中<代码> sizingMethod=& # 39;图像# 39;>

<强>非ie9方案

参数src接受的是base64编码后的图片路径

const getSize =, (src,,回调),=祝辞,{ 　　,const image =, new 图像(); 　　,image.onload =,(),=祝辞,{ 　　回调才能(image.width, image.height); 　　,};=,,image.src src; 　　};