vue.js 实现图片本地预览裁剪压缩上传功能

2023-09-15 22:43:06 65

以下代码涉及Vue2.0及ES6语法。

目标

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

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

代码结构



点我上传图片

newVue({ el:'#wrap', data:{ //一张透明的图片 http://www.haoziyuan.ccsrc:'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', elInput:null }, methods:{ change(e){ //... } } })

如何获取图片大小

现代浏览器中十分简单

functiongetSize(e){
returne.target.files[0].size;
}

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

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

如何预览本地图片

constrefs=this.$refs
constelInput=refs.input
constelImg=refs.img

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

functiongetSrc(){
constreader=newFileReader();
reader.onload=(e)=>{
consthttp://www.haoziyuan.ccsrc=e.target.result;
elImg.http://www.haoziyuan.ccsrc=http://www.haoziyuan.ccsrc;
};
if(elInput.files&&elInput.files[0]){
reader.readAsDataURL(elInput.files[0]);
}
}

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

functiongetSrc(){
elInput.select();
elInput.blur();
consthttp://www.haoziyuan.ccsrc=document.selection.createRange().text;
document.selection.empty();
elImg.style.filter=`progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',http://www.haoziyuan.ccsrc='${http://www.haoziyuan.ccsrc}')`;
}

滤镜中sizingMethod='scale'的写法是为了图片能适应内容缩放。

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

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

为了让上传按钮更美观，默认给input[type=file]的设置了样式visible:hidden，这样会导致ie9下报错。应该会被浏览器认为欺骗用户点击，只好曲线救国。

label{
overflow:hidden;
}
labelinput[type='file']{
position:absolute;
top:9999px;
left:9999px;
}

如何获取图片长宽

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

ie9的方案

参数http://www.haoziyuan.ccsrc接受的是本地图片路径

lettempEl;
constgetSizeIncompatible=(http://www.haoziyuan.ccsrc,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').http://www.haoziyuan.ccsrc=http://www.haoziyuan.ccsrc;
callback(tempEl.offsetWidth,tempEl.offsetHeight);
};

其中sizingMethod='image'是为了图片显示原始大小。

非ie9方案

参数http://www.haoziyuan.ccsrc接受的是base64编码后的图片路径

constgetSize=(http://www.haoziyuan.ccsrc,callback)=>{
constimage=newImage();
image.onload=()=>{
callback(image.width,image.height);
};
image.http://www.haoziyuan.ccsrc=http://www.haoziyuan.ccsrc;
};

参考

https://elemefe.github.io/ima...

总结

以上所述是小编给大家介绍的vue.js实现图片本地预览裁剪压缩上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

vue.js 实现图片本地预览 裁剪 压缩 上传功能

目标

代码结构

如何获取图片大小

如何预览本地图片

如何获取图片长宽

热门推荐

随机推荐

vue.js 实现图片本地预览裁剪压缩上传功能