功能一览

  • 图片缩放
  • 图片旋转
  • 图片拖拽

组件使用 vue 编写，可直接使用：

  1.     <ImagePreview
  2.       :src="previewSrc"
  3.       :show.sync="previewShow"
  4.     />
  1. <template>
  2.   <div
  3.     class="image-preview"
  4.     v-if="show"
  5.     @mousewheel.prevent="scaleImg"
  6.     @mouseup="onMouseUp"
  7.     @mousemove="move"
  8.   >
  9.     <div class="image-preview__mask" @click="hide" />
  10.     <img
  11.       class="image-preview__img"
  12.       :src="src"
  13.       :style="imgStyle"
  14.       @dragstart.prevent
  15.       @mousedown="onMouseDown"
  16.     >
  17.     <div class="image-preview__option">
  18.       <a @click.stop="rotate(1)" @mouseup.stop><img src="https://img1.dxycdn.com/2018/1122/584/3313301195686592508-2.png"></a>
  19.       <a @click.stop="rotate(2)" @mouseup.stop><img src="https://img1.dxycdn.com/2018/1122/118/3313301195686709591-2.png"></a>
  20.     </div>
  21.   </div>
  22. </template>
  24. <script>
  25. export default {
  26.   name: 'ImagePreview',
  27.   props: {
  28.     show: {
  29.       type: Boolean,
  30.       default: false
  31.     },
  32.     src: {
  33.       type: String,
  34.       default: ''
  35.     }
  36.   },
  37.   data () {
  38.     return {
  39.       scale: 0,
  40.       startX: 0,
  41.       startY: 0,
  42.       moveX: 0,
  43.       moveY: 0,
  44.       x: 0,
  45.       y: 0,
  46.       angle: 0,
  47.       onMove: false
  48.     }
  49.   },
  50.   computed: {
  51.     imgStyle () {
  52.       return {
  53.         transform: `scale(${1 + this.scale * 0.1}) rotate(${this.angle}deg)`,
  54.         top: `${this.moveY || this.y}px`,
  55.         left: `${this.moveX || this.x}px`,
  56.         cursor: this.onMove ? 'grabbing' : 'grab'
  57.       }
  58.     }
  59.   },
  60.   watch: {
  61.     'show' (newVal) {
  62.       if (!newVal) {
  63.         this.scale = 0
  64.         this.startX = 0
  65.         this.startY = 0
  66.         this.x = 0
  67.         this.y = 0
  68.         this.onMove = false
  69.       }
  70.     }
  71.   },
  72.   methods: {
  73.     hide () {
  74.       this.$emit('update:show', false)
  75.     },
  76.     scaleImg (e) {
  77.       if (e.deltaY < 0) {
  78.         this.scale += 1
  79.       } else if (this.scale > -9) {
  80.         this.scale -= 1
  81.       }
  82.     },
  83.     onMouseDown (e) {
  84.       if (e.button !== 0) return
  85.       this.onMove = true
  86.       this.startX = e.clientX
  87.       this.startY = e.clientY
  88.       return false
  89.     },
  90.     onMouseUp () {
  91.       this.onMove = false
  92.       if (this.moveX === 0 && this.moveY === 0) return
  93.       this.x = this.moveX
  94.       this.y = this.moveY
  95.       this.moveX = 0
  96.       this.moveY = 0
  97.     },
  98.     move (e) {
  99.       if (this.onMove) {
  100.         this.moveX = this.x + e.clientX - this.startX
  101.         this.moveY = this.y + e.clientY - this.startY
  102.       }
  103.     },
  104.     rotate (direct) {
  105.       if (direct === 1) {
  106.         this.angle -= 90
  107.       } else {
  108.         this.angle += 90
  109.       }
  110.     }
  111.   }
  112. }
  113. </script>
  115. <style lang="less" scoped>
  116. .image-preview {
  117.   position: fixed;
  118.   top: 0;
  119.   right: 0;
  120.   bottom: 0;
  121.   left: 0;
  122.   z-index: 3000;
  123.   text-align: center;
  124.   &__mask {
  125.     position: absolute;
  126.     width: 100%;
  127.     height: 100%;
  128.     background: rgba(0, 0, 0, 0.75);
  129.     cursor: url('~@/assets/images/close2.png'),auto;
  130.   }
  131.   &__img {
  132.     position: relative;
  133.     max-width: 100%;
  134.     max-height: 100%;
  135.     transition: transform 0.2s;
  136.   }
  137.   &__option {
  138.     background: rgba(0, 0, 0, 0.349);
  139.     position: fixed;
  140.     height: 70px;
  141.     padding:5px 0;
  142.     bottom:0;
  143.     left:0;
  144.     width: 100%;
  145.     text-align: center;
  146.     a {
  147.       display:inline-block;
  148.       line-height: 0;
  149.       border-radius: 3px;
  150.       &:hover{
  151.         background: rgba(255, 255, 255, 0.3);
  152.       }
  153.       img {
  154.         max-width: 70px;
  155.         max-height: 70px;
  156.         will-change: transform;
  157.       }
  158.     }
  159.   }
  160. }
  161. </style>

代码来自 dxyer