Negotiable Paleobotanist Missions
    Wondering what’s next for npm?Check out our public roadmap! »

    image-diff-view

    1.2.0 • Public • Published

    image-diff-view

    Compares images, inspired by Github's image diff view modes.

    Inspered by https://github.com/cezary/react-image-diff also (Demo).

    Gif image diff view swipe demo Gif image diff view fade demo

    Modes

    • difference (classic diff)
    • fade (onion skin)
    • swipe

    Usage

    Controls are not delivery out of the box. You are free to implement your unique diff controls.

    npm install image-diff-view

    Checkout example and demo.

    import ImageDiff from 'image-diff-view';
     
    var beforeUrl = 'http://cezary.github.io/react-image-diff/public/img/spot-the-difference-a.jpg',
        afterUrl = 'http://cezary.github.io/react-image-diff/public/img/spot-the-difference-b.jpg';
     
    var imageDiff = new ImageDiff(document.getElementById('image-diff'), beforeUrl, afterUrl, 'swipe');
    imageDiff.swipe(0.5);
    imageDiff.update(beforeUrl, afterUrl, 'fade');
    imageDiff.fade(0.8);
    imageDiff.tune(0.4); // abstract tune method rather than fade/swipe()
    <div class='image-diff' id='image-diff'>
      <div class='image-diff__inner'>
        <div class='image-diff__before'><img/></div>
        <div class='image-diff__wrapper'><div class='image-diff__after'><img/></div></div>
      </div>
    </div>

    Dependencies

    No dependencies required

    Our users

    • Yandex

    Install

    npm i image-diff-view

    DownloadsWeekly Downloads

    0

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar