这篇文章主要介绍了vue.js 实现图片本地预览裁剪压缩上传功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
以下代码涉及 vue 2.0 及 es6 语法。
目标纯 javascrpit 实现，兼容ie9及以上浏览器，在本地做好文件格式、长宽、大小的检测，减少浏览器交互。
现实是残酷的，为了兼容ie9 还是用上了 flash，第二篇来解释解释。
代码结构
<p id="wrap">
<label>
点我上传图片
<input type='file' @change="change" ref="input">
</label>
<img :src="src" ref="img">
</p>
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('p');
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;
};
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
解决vue 通过下表修改数组,页面不渲染的问题
vue2.0 axios跨域并渲染的问题解决方法
layui之select的option叠加问题的解决方法
以上就是在vue.js中实现图片本地预览 裁剪 压缩 上传等一系列功能的详细内容。