Vue Image Compare

Vue Image Compare
- Purpose of this fork
- Installation
- Usage
  - Props
  - Slots
  - Events
- Development
- Thanks
- License

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 middle click to start flickering left image for seconds

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

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

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 folder :

<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

@movement - when image/handle is dragged left/right

Development

To contribute or try this component :

clone this repo
install dependencies : npm install
start dev task : npm run dev

Thanks

ctf0 : for his multiple contributions ❤️
Netlify : awesome company that offers hosting for OSS
Pixabay : for the free to use images
Shields.io : nice looking badges to be proud of
Travis-ci.org : for providing free continuous deployments

License

MIT