vue 图片优化
Posted tongshuangxiong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 图片优化相关的知识，希望对你有一定的参考价值。
npm i image-conversion --save
# or
yarn add image-conversionimport { compress, compressAccurately } from "image-conversion";
// 要用前先引用
handleBefore(file) {
/** 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 */
return new Promise((resolve, reject) => {
const _URL = window.URL || window.webkitURL;
const isLt2M = file.size / 1024 / 1024 > 2; // 判定图片大小是否小于4MB
// 这里需要计算出图片的长宽
const img = new Image();
img.onload = function() {
file.width = img.width; // 获取到width放在了file属性上
file.height = img.height; // 获取到height放在了file属性上
const imgwidth = img.width > 1280; // 图片宽度
const imgheight = img.height > 1280; // 图片高度
// 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
if (imgwidth && isLt2M && imgheight) {
compressAccurately(file, {
size: 2048,
width: 1280,
height: 1280
}).then(res => {
resolve(res);
});
} else if (imgwidth && isLt2M) {
compressAccurately(file, {
size: 2048,
width: 1280
}).then(res => {
resolve(res);
});
} else if (imgheight && isLt2M) {
compressAccurately(file, {
size: 2048,
height: 1280
}).then(res => {
resolve(res);
});
} else if (imgheight && imgwidth) {
compressAccurately(file, {
width: 1280,
height: 1280
}).then(res => {
resolve(res);
});
} else if (isLt2M) {
compressAccurately(file, {
size: 2048
}).then(res => {
resolve(res);
});
} else if (imgwidth) {
compressAccurately(file, {
width: 1280
}).then(res => {
resolve(res);
});
} else if (imgheight) {
compressAccurately(file, {
height: 1280
}).then(res => {
resolve(res);
});
} else resolve(file);
}; // 需要把图片赋值
img.src = _URL.createObjectURL(file);
});
},
以上是关于vue 图片优化的主要内容，如果未能解决你的问题，请参考以下文章
vue11----前端优化路由懒加载（异步组件）keep-alivelocalStorage二次封装vue-lazyload图片懒加载mint-ui封装加载loading条axios请求