An image magnifying glass Effect for vue

vue-photo-zoom-pro

An image magnifying glass Effect for vue.

Usage example


npm install vue-photo-zoom-pro

main.js

import vuePhotoZoomPro from 'vue-photo-zoom-pro'
import vuePhotoZoomPro from 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'

export default {
  components: {
    vuePhotoZoomPro
  }
}

or cdn

<script src="https://cdn.jsdelivr.net/npm/vue-photo-zoom-pro/dist/vue-photo-zoom-pro.global.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css" />

*.vue

Image

<vue-photo-zoom-pro :high-url="imgSrc">
  <img :src="imgSrc" />
</vue-photo-zoom-pro>

Tips: If your image is not loaded at the beginning and set disabled-reactive, you must manually listen for the event when the image is loaded before displaying it

<vue-photo-zoom-pro v-if="loaded" :high-url="imgSrc">
  <img :src="imgSrc" />
</vue-photo-zoom-pro>
export deafult{
  data(){
    return {
      loaded: false,
      imgSrc: ''
    }
  },
  created(){
    const img = new Image()
    img.src = imgSrc
    img.addEventListener('load', ()=>{
      this.loaded = true
    })
  }
}

Customize the enlarged area

You can use any element to represent the enlarged area

<vue-photo-zoom-pro :high-url="imgSrc">
  <div style="width:100px; height: 200px"></div>
</vue-photo-zoom-pro>

Customize magnified elements

<vue-photo-zoom-pro>
  <template slot="zoomer">
    <!-- Is the same as the canvas-1 -->
    <canvas id="canvas-2" width="100" height="100"></canvas>
  </template>
  <canvas id="canvas-1" width="100" height="100"></canvas>
</vue-photo-zoom-pro>
const canvas1 = document.querySelector('#canvas-1')
const canvas2 = document.querySelector('#canvas-2')
const ctx1 = canvas1.getContext('2d')
const ctx2 = canvas2.getContext('2d')

const offscreenCanvas = document.createElement('canvas')
const ctx = c.getContext('2d')
offscreenCanvas.width = 100
offscreenCanvas.height = 100

ctx.font = '30px Arial'
ctx.fillText('Hello World', 10, 50)

ctx1.drawImage(offscreenCanvas, 0, 0)
ctx2.drawImage(offscreenCanvas, 0, 0)

Settings

props

Prop Name Type Default Note
high-url String Clearer picture url
scale Number 2 magnification
disabled Boolean false disabled move
width Number 166 The width of the magnified area
height Number -1 The height of the magnified area
type String square magnifying glass type (circle,square)
selector Boolean true show or remove selector
out-zoomer Boolean false amplification region will be displayed on the outside
mask Boolean false show mask
mask-color Color {} mask color
enter-event Object/UIEvent null custom enter event
move-event Object/UIEvent null custom move event
leave-event Object/UIEvent null custom leave event
disabled-reactive Boolean false Disable listening for internal element info changes

Slot

Slot Name Note
default default slot
selector selector slot
zoomer inner zoomer slot
outzoomer out zoomer slot

Event

Event Name Note value
created created event
mouseenter mouse enter event
mousemove mouse move event
mouseleave mouse leave event

Methods

Method Name Note value
update update

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:5000
npm run dev & npm run serve

# build for production with minification
npm run build