vue中使用js等比压缩图片

最近做一个旅游项目 大家都知道旅游项目图片居多

    1.在项目中由于图片尺寸过大  再加上给图片设置了宽高导致图片压缩严重

        *下面我给大家看一下原图

        

    2. 设置图片的方式有很多种  可以通过背景图来设置background；在项目中一些小图片建议使用字体图标代替？

    3.下面给大家展示设置宽高的图片

                                        <img width="200" height="300" src="https://desk-fd.zol-img.com.cn/t_s720x360c5/g5/M00/0D/06/ChMkJlojp_qITurJAAuxrJdcGiEAAiwQAKU7i0AC7HE992.jpg" alt="">

         已经远远看到图片已经变形了

     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) {

//原图片原始地址（用于获取原图片的真实宽高，当<img>标签指定了宽、高时不受影响）

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>

<!-- Add "scoped" attribute to limit CSS to this component only -->

< style scoped>

.dom_width {

width: 200 px;

height: 300 px;

background-color: skyblue;

}

</ style>