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

• ctf0 : for his multiple contributions ❤️
• 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
• Netlify : awesome company that offers hosting for OSS
• Pixabay : for the free to use images
• Repo-checker : eslint cover /src code and this tool the rest ^^
• 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