vue中使用js等比压缩图片

56 阅读 0 评论 37 点赞

我是靠谱客的博主傲娇砖头，最近开发中收集的这篇文章主要介绍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) { 
 
  //原图片原始地址（用于获取原图片的真实宽高，当<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>