照片放大功能h5

这里就不放图了,放大的是别人的身份证

<template>
  <div class="image-cell__wrapper" :style="border">
    <span class="title" :style="{color: titleColor}">{{ imageTitle }}</span>
    <span class="icon-image"></span>
    <span class="image-wrapper">
      <img v-for="(item, key) in realImage" :src="imageHandle(item, 80, 80)" alt="image">
    </span>
    <span class="icon-arrow" v-if="arrow"></span>
    <div v-if="inlineBorder"
          class="inline-border"></div>
  </div>
</template>

<script>
import { imgHandle } from '@/utils/tool'
export default {
  name: 'imageCell',
  props: {
    imageTitle: {
      type: String,
      required: true
    },
    image: {
      required: false
    },
    arrow: {
      type: Boolean,
      default: true
    },
    titleColor: {
      type: String,
      default: '#575fb6'
    },
    inlineBorder: {
      type: Boolean,
      default: false
    },
    hasBorder: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      border: {
        borderBottom: this.hasBorder ? '1px solid #ececec' : ''
      }
    }
  },
  created () {
  },
  computed: {
    realImage () {
      if (this.image) {
        return this.image.length > 5 ? this.image.slice(0, 5) : this.image
      }
    }
  },
  methods: {
    imageHandle (url, w, h) {
      return imgHandle(url, w, h)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/mixin.stylus"
  .image-cell__wrapper{
    position relative
    width 9rem
    padding 0 .5rem
    height 1.5rem
    line-height 1.5rem
    background-color white
    font-dpr(16px)
    color #4A4A4A
    .title{
      color #575fb6
    }
    .icon-image{
      display inline-block
      width .5rem
      height .4rem
      bg-image('./img/picture')
      background-size contain
      vertical-align middle
    }
    .image-wrapper{
      display inline-block
      position absolute
      right 1rem
      img{
        display inline-block
        vertical-align middle
        padding-left .3rem
        width .6rem
        height .6rem
      }
    }
    .icon-arrow{
      position relative
      top .6rem
      float right
      display inline-block
      width .2rem
      height .4rem
      bg-image('~@/assets/img/arrow')
      background-size contain
    }
    .inline-border{
      position absolute
      bottom 0
      left .4rem
      width 9.6rem
      height 1px
      background-color #ECECEC
    }
  }
</style>

tool.js里面的imgHandle

@function imgHandle 切割图片
function imgHandle (url, width, height) {
  const fontSize = document.documentElement.style.fontSize.split('px')[0]
  return url + '?imageView2/1/w/' + (fontSize / 75 * width * 5).toFixed(0) + '/h/' + (fontSize / 75 * height * 5).toFixed(0) + '/q/100'
}
export {  imgHandle }
export default { imgHandle }