Skip to content

Latest commit

 

History

History
135 lines (99 loc) · 4.25 KB

README.md

File metadata and controls

135 lines (99 loc) · 4.25 KB
Raw

Vue Image Compare 2

npm npm vue2

Purpose of this fork

Updates (original repo seems dead) & new features :)

simple images loading via drag & drop files into browser, will load images locally (no upload to any server)

  • drop 2 files
  • drop 1 file on one side to change only one side of the comparison

better image comparison to see details :

  • allow click & drag
  • allow zoom
  • allow midddle click to start flickering left image for seconds

You can see the updated features of this fork on : https://image-compare.netlify.com

And still check the original author website : https://marcincichocki.github.io/vue-image-compare

Installation

yarn add vue-image-compare2
# or
npm i vue-image-compare2 --save

Usage

  • register the componenet Globally :
import Vue from 'vue'
import imageCompare from 'vue-image-compare2'

new Vue({
    components: {
        imageCompare
    },
    data() {
        return {
            before: '/img/before.jpg',
            after: '/img/after.jpg'
        }
    }
}).$mount('#app')

or locally :

import imageCompare from 'vue-image-compare2'

export default {
   data() {
    return {
      before: '/img/before.jpg',
      after: '/img/after.jpg'
    }
  },
  components: {
    imageCompare
  }
}
  • Then you can use image-compare with a minimal init :
<div id="app">
    <image-compare :before="before" :after="after"/>
</div>

or with some optionals params, like in demo :

<div id="app">
    <image-compare :before="before" :after="after" full isZoomable isSwitchable isDraggable>
      <i class="fa fa-angle-left" aria-hidden="true" slot="icon-left"></i>
      <i class="fa fa-angle-right" aria-hidden="true" slot="icon-right"></i>
    </image-compare>
</div>

Props

Name Type Default Description
before String undefined (required) path to the image before
after String undefined (required) path to the image after
full Boolean false stretch images (1)
padding Object {left: 0, right: 0} left and right padding (2)
hideAfter Boolean false hide the after image
zoom Object {min: 0.5, max: 2} scale image by
reset Boolean false reset all to original
isZoomable Boolean false mouse wheel to zoom in/out
isDraggable Boolean false allow moving the comparison
isSwitchable Boolean false allow drag & drop
hideHandle Boolean false hide vertical handle bar
labels Object {after: '', before: ''} comparison labels

(1) : Determines if images are stretched to fill parent element. Can be used with help of CSS object-fit: cover to create full page image comparison

(2) : Set left and right "padding" in pixels, so handle can not reach edge of an image

Slots

  • icon-left - element to be placed on the left side of the handle
  • icon-right - element to be placed on the right side of the handle

Example:

<image-compare before="/img/before.jpg" after="/img/after.jpg">
    <i class="fa fa-angle-left" aria-hidden="true" slot="icon-left"></i>
    <i class="fa fa-angle-right" aria-hidden="true" slot="icon-right"></i>
</image-compare>

Events

  • @movment - when image/handle is dragged left/right

Thanks

  • ctf0 : for his multiple contributions ❤️

License

MIT