Diffing imágenes en Vanilla JavaScript-imagen diff View
| Autor: | a-x- |
|---|---|
| Views Total: | 2,926 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 26, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Imagen diff View es una biblioteca de JavaScript vainilla para comparar diferencias entre dos imágenes con los siguientes modos:
- Diferencia
- onion skin: view Diferencias of your images with a fade effect.
- deslizar: ver partes de las imágenes una al lado de la otra.
¿Cómo funciona?
Cargue los archivos JS y CSS requeridos en el archivo HTML.
<link rel='stylesheet' href='index.css'> <script src='index.js'></script>
La estructura HTML para la interfaz de comparación de imágenes.
<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>
Especifique las imágenes que desea comparar.
var beforeUrl = 'before.jpg', afterUrl = 'after.jpg';
Cree un nuevo objeto ImageDiff y especifique el modo que desea usar.
var imageDiff = new ImageDiff(document.getElementById('image-diff'), beforeUrl, afterUrl, 'swipe');
