Vue Image Compare 2

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