Vue Image Compare

• Vue Image Compare
  • Purpose of this fork
  • Installation
  • Usage
    • Props
    • Slots
    • Events
  • Development
  • Todo
  • 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

• register the component 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 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

Todo

• submit this app to ProductHunt

Thanks

• Chokidar : minimal and efficient cross-platform file watching library
• ctf0 : for his multiple contributions ❤️
• Esbuild : an extremely fast JavaScript bundler and minifier
• Eslint : super tool to find & fix problems
• FreeIcons.io: for the logo/icon
• Github : for all their great work year after year, pushing OSS forward
• Mocha : great test runner easy to setup & use
• Netlify : awesome company that offers hosting for OSS
• Npm-run-all : to keep my npm scripts clean & readable
• Nyc : simple & effective cli for code coverage
• Pixabay : for the free to use images
• Repo-checker : eslint cover /src code and this tool the rest ^^
• Servor : dependency free dev server for single page app development
• Shields.io : nice looking badges to be proud of
• Shuutils : collection of pure JS utils
• vite-vue2-starter: for the vite vue 2 starter pack
• Vite : super fast frontend tooling
• Vue : when I need a front framework, this is the one I choose <3

License

MIT