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

Slot

Event

Methods

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