marcincichocki / vue-image-compare

Compare 2 images using slider with vue.js

Vue Image Compare

Requirements

• Vue.js (^2.0.0)

Installation

npm i vue-image-compare --save

Usage

import Vue from 'vue';
import VueImageCompare from 'vue-image-compare';

Vue.use(VueImageCompare);

new Vue({
  data() {
    return {
      before: '/img/before.jpg',
      after: '/img/after.jpg'
    }
  }
}).$mount('#app');

<div id="app">
  <image-compare :before="before" :after="after"/>
</div>

If you are not using using es6, instead of importing add

<script src="/path/to/vue-image-compare.js"></script>

just before closing body tag.

Props

Name	Type	Description	Required	Default
before	String	Path to the image image before change	Yes	undefined
after	String	Path to the image image after change	Yes	undefined
full	Boolean	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	No	false
padding	Object	Set left and right "padding" in pixels, so handle can not reach edge of an image	No	{ left: 0, right: 0 }
hideAfter	Boolean	Hide image after and handle	No	false

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" :padding="{ left: 50, right: 50 }">
  <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>

License

MIT

vue-image-compare's Issues

Issue with resizing and the width of the image

Great plugin BTW.

I am seeing some odd behaviour when I resize my browser. The image is in a 2 column layout with text next to it and is using flexbox. when it is resized the items stack. the image gets much larger (which is not the issue) then when I resize back to a larger size the size of the element does not update and stay in the larger size it was when it stacked.

I hope I was clear.

Thanks.

Window is not Defined reference error for Nuxt

Hi,

Love this vue-image-compare! Was trying to use on a nuxt project I had but was unfortunately getting a Window is not Defined reference error. Here is the screen shot:

So you can see what I was doing in the code:

<nuxt-link to="/cc/living1"
      ><ImageCompare
        :padding="{ left: 50, right: 50 }"
        :before="before"
        :after="after"
        alt="Living Room 1 image before and after"
      >
        <i slot="icon-left" class="fa fa-angle-left" aria-hidden="true"></i>
        <i slot="icon-right" class="fa fa-angle-right" aria-hidden="true"></i>
      </ImageCompare>
    </nuxt-link>

Then here for the script

<script>
import ImageCompare from 'vue-image-compare'

export default {
  data() {
    return {
      before:
        'https://tom.imgix.net/living1before.jpg?w=1000&h=1000&fit=crop&auto=format%2Ccompress',
      after:
        'https://tom.imgix.net/living1after.jpg?w=1000&h=1000&fit=crop&auto=format%2Ccompress'
    }
  },
  components: { ImageCompare }
}
</script>

Any idea what's causing this? Had any success with using this in a nuxt project?

[bug] Console errors contain a weird path to the component

Hi Marcin,

Thanks for your useful component!
I've noticed a minor bug with reporting errors.

Steps to reproduce:

1. Add the component to your project
2. Don't specify a before or after prop.

Expected result:
Console error with the following text:
---> <ImageCompare> at vue-image-compare.vue

Actual result:
---> <ImageCompare> at /home/marcin/Dokumenty/Projekty/vue-image-compare/src/vue-image-compare.vue

Here's the full excerpt from my console:

[Vue warn]: Invalid prop: type check failed for prop "before". Expected String, got Undefined.

found in

---> <ImageCompare> at /home/marcin/Dokumenty/Projekty/vue-image-compare/src/vue-image-compare.vue
       <ImgSplit> at src/components/report/ImgSplit.vue
         <QTabPane>
           <QTabs>
             <ComparisonModes> at src/components/report/ComparisonModes.vue

I believe it's caused by this line in dist file

__vue_options__.__file = "/home/marcin/Dokumenty/Projekty/vue-image-compare/src/vue-image-compare.vue"

Cheers!

Out of bounds error

When you move the cursor out of bound this error occurs.

client.js?06a0:102 TypeError: Cannot read property '0' of undefined
    at VueComponent.onMouseMove (vue-image-compare.js?d322:223)
    at mousemove (vue-image-compare.js?d322:355)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
_callee$ @ client.js?06a0:102
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ client.js?06a0:64
globalHandleError @ vue.runtime.esm.js?2b0e:1870
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

New release checklist

This is a master issue that aggregate smaller things required to get this repo back and running. Since it has been abandoned for a long time, a lot of things are out of date or not existing at all(hello tests)

Things to do before next release:

• add tests
• set up CI for tests and automatic deployments to npm
• review dependencies and update them accordingly
• merge any PR

Mouse event bug

Hi,
I have noticed problem on comparing full-sized images. When you set image-compare-handler to the left edge(max value allowed by padding property) you get fatal like this:
vue-image-compare.min.js:1 Uncaught TypeError: Cannot read property '0' of undefined
at a.onMouseMove (vue-image-compare.min.js:1)
at a.n [as onMouseMove] (vue.min.js:6)
at mousemove (vue-image-compare.min.js:1)
at HTMLElement.invoker (vue.min.js:6)

After this error, you can't use image-compare-handler anymore. What is strange, this error doesn't appear on the right side. Even here: https://marcincichocki.github.io/vue-image-compare/ on full size demo you can observe this bug.

mouse events to excessiv registered/unregistered (bug)

I stumbled about a bug where some of my JS-driven links do not work anymore. After a hour of search i found that your script caused the error.

I assume the problem is caused by the following code (but did not test enough).

window.removeEventListener('mouseup',` this.onMouseUp);
window.removeEventListener('resize', this.onResize);

Finally I have removed the script again and instead used the following codepen on my page: https://codepen.io/bamf/pen/jEpxOX

auto play option

Is there any possibility to add autoplay option?

so when compare is created, the slider does an autoplay?

Demo does not work for a lot of colorblind people

Hey
Nice work, but just wanted to let you know that I really didn't see any difference between the "First" and "Second" image :/ I'm really colorblind, needless to say, and a lot of other guys are as well.

Tip:
Maybe just make the First image black n white?