vue如何利用js等比壓縮圖片

這篇文章介紹的內容是關於vue如何利用js等比壓縮圖片，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

最近做一個旅遊項目大家都知道旅遊項目圖片居多

#    1.在項目中由於圖片尺寸過大  再加上為圖片設定了寬高導致圖片壓縮嚴重

        *下面我給大家看一下原圖

##        

#        

##      

#    2. 設定圖片的方式有很多種  可以透過背景圖來設定background；在專案中一些小圖片建議使用字體圖示代替？

    3.下面給大家展示設定寬高的圖片

# 

##     4. 在網路上閱讀了一些資料結合自己需要的效果實現了

##           雖然還是有些誤差  但是只要後台設置上傳圖片規格  對我們壓縮圖片的效果有很大好處

            

            最後附上程式碼 （有較好的方法請一起溝通）

<template>
<p class="hello">
<p class="dom_width">
<img class="img_block" v-for="(item, index) in listImg" :key="index" :src="item" alt="">
</p>
</p>
</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, &#39;width&#39;);
let hei = this.getWidHei(parentWh, &#39;height&#39;);
// 等比压缩图片
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: 200px;
height: 300px;
background-color: skyblue;
}
</style>

##相關建議：

# 相關建議：

java指定寬度等比例壓縮圖片

使用Html5實作圖片的壓縮

##CSS圖片剪裁與原始比例壓縮或放大

php圖片等比例壓縮#########

以上是vue如何利用js等比壓縮圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！