vue中使用js等比压缩图片
最近做一个旅游项目 大家都知道旅游项目图片居多
1.在项目中由于图片尺寸过大 再加上给图片设置了宽高导致图片压缩严重
*下面我给大家看一下原图
2. 设置图片的方式有很多种 可以通过背景图来设置background；在项目中一些小图片建议使用字体图标代替？
3.下面给大家展示设置宽高的图片
已经远远看到图片已经变形了
4. 在网上看了一些资料结合自己需要的效果 实现了一下
虽然还是有些误差 但是只要后台设置上传图片规格 对我们压缩图片的效果有很大好处
最后附上代码 （有更好的方法请一起交流）
<
template>
<
div
class=
"hello">
<
div
class=
"dom_width">
<
img
class=
"img_block"
v-for="(item, index)
in listImg"
:key="index"
:src="item"
alt=
"">
div>
div>
template>
<
script>
export
default {
name
:
"HelloWorld",
data() {
return {
listImg
: [
"https://desk-fd.zol-img.com.cn/t_s720x360c5/g5/M00/0D/06/ChMkJlojp_qITurJAAuxrJdcGiEAAiwQAKU7i0AC7HE992.jpg",
"https://desk-fd.zol-img.com.cn/t_s720x360c5/g5/M00/03/00/ChMkJ1pcn7OIULOjAAWUOFboVoEAAkG3ANBKU8ABZRQ309.jpg",
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1046983545,2051560208&fm=27&gp=0.jpg"
]
}
},
created() {
},
mounted() {
// 获取所有的img标签
let imgList
= document.
querySelectorAll(
".img_block");
// 获取父元素宽高
let parentWh
= imgList[
0].parentNode;
let wid
=
this.
getWidHei(parentWh,
'width');
let hei
=
this.
getWidHei(parentWh,
'height');
// 等比压缩图片
this.
AutoSize(imgList, wid, hei);
},
methods
: {
AutoSize(
listImg,
maxWidth,
maxHeight) {
//原图片原始地址（用于获取原图片的真实宽高，当![]()
标签指定了宽、高时不受影响）
let image
=
new
Image();
for (
let i
=
0; i
< listImg.length; i
++) {
// 获取每一个图片的宽高
image.src
= listImg[i].src;
// 当图片比图片框小时不做任何改变
if (image.width
< maxWidth
&& image.height
< maxHeight) {
//原图片宽高比例 大于 图片框宽高比例
listImg[i].width
= image.width;
listImg[i].height
= image.height;
}
else {
//原图片宽高比例 大于 图片框宽高比例,则以框的宽为标准缩放，反之以框的高为标准缩放
if (maxWidth
/ maxHeight
<= image.width
/ image.height) {
listImg[i].width
= maxWidth;
//以框的宽度为标准
listImg[i].height
= maxWidth
* (image.height
/ image.width);
}
else {
listImg[i].width
= maxHeight
* (image.width
/ image.height);
listImg[i].height
= maxHeight;
//以框的高度为标准
}
}
}
},
// 考虑 IE 的兼容性
getStyle(
el) {
if (window.getComputedStyle) {
return window.
getComputedStyle(el,
null);
}
else {
return el.currentStyle;
}
},
// 通过当前元素获取宽高
getWidHei(
el,
name) {
let val
= name
===
"width"
? el.offsetWidth
: el.offsetHeight,
which
= name
===
"width"
? [
"Left",
"Right"]
: [
"Top",
"Bottom"];
// display is none
if (val
===
0) {
return
0;
}
let style
=
this.
getStyle(el);
// 左右或上下两边的都减去
for (
let i
=
0, a; (a
= which[i
++]); ) {
val
-=
parseFloat(style[
"border"
+ a
+
"Width"])
||
0;
val
-=
parseFloat(style[
"padding"
+ a])
||
0;
}
return val;
}
}
};
script>
<
style
scoped>
.dom_width {
width:
200
px;
height:
300
px;
background-color:
skyblue;
}
style>