Comment vue utilise js pour compresser les images de manière égale

Cet article présente comment vue utilise js pour compresser des images dans des proportions égales. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.

Comme nous le savons tous lorsque nous travaillons récemment sur un projet touristique, la plupart des photos du projet touristique sont

1 . En raison de la taille des images du projet trop grande, associée au réglage de la largeur et de la hauteur de l'image, ce qui entraîne une compression sévère de l'image

*Je vais vous montrer l'image originale ci-dessous

>

2. Il existe de nombreuses façons de définir des images. Vous pouvez définir l'arrière-plan via une image d'arrière-plan. Pour certaines petites images du projet, est-il recommandé d'utiliser des icônes de police à la place ?

3. Ce qui suit vous montre l'image du réglage de la largeur et de la hauteur

  

J'ai vu de loin que l'image a été déformée

                                                                                 Il y a quelques erreurs, mais tant que les spécifications de l'image téléchargée sont définies en arrière-plan, cela sera très bénéfique pour notre effet de compression d'image.

                                （> Enfin le code ci-joint (si vous avez un meilleur moyen, veuillez communiquer ensemble)

Recommandation associée :
🎜>Java spécifie la largeur pour compresser l'image proportionnellement

Utilisez Html5 pour compresser l'image

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

Recadrage d'image CSS et compression ou agrandissement des proportions originales

Compression à proportion égale d'image php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!