Skip to content

Latest commit

 

History

History
179 lines (136 loc) · 6.65 KB

README.md

File metadata and controls

179 lines (136 loc) · 6.65 KB

Vue Image Compare

Code Climate maintainability Install size Publish size npm npm monthly downloads vue2 Package Quality GitHub license

Website

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

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