Image Compare - Compara las imágenes antes y después

Compara las imágenes antes y después, para la clasificación, CGI y otras comparaciones de retoque. Vainilla Javascript, cero dependencias.

Image Compare - Compara las imágenes antes y después

Cómo usarlo

HTML

El visor de comparación de imágenes es fácil de usar. El HTML es tan simple como añadir dos imágenes en un padre que las contiene. El padre necesitará una identificación o nombre de clase (útil para varios espectadores en una sola página).

<div id="image-compare">
  <img src="path/to/before.jpg" alt="" />
  <img src="path/to/after.jpg" alt="" />
</div>

CSS

Si estás usando NPM, el CSS se encuentra en node_modules/image-compare-viewer/src/styles/index.scss o node_modules/image-compare-viewer/dist/image-compare-viewer.min.css.

JAVASCRIPT

Importación

import ImageCompare from "image-compare-viewer";

¿Un solo visor?

1. Referencia > 2. Montar...

const element = document.getElementById("image-compare");
const viewer = new ImageCompare(element).mount();

¿Múltiples visores?

1. Recoger > 2. Bucle > 3. Montar...

const viewers = document.querySelectorAll(".image-compare");
  
viewers.forEach((element) => {
  let view = new ImageCompare(element).mount();
});

OPCIONES

El objeto de las opciones a continuación muestra los valores por defecto de todas las opciones. Todas las opciones se utilizan en los ejemplos.

const options = {

  // El tema de la UI por defecto

  controlColor: "#FFFFFF",
  controlShadow: true,
  addCircle: false,
  addCircleBlur: true,

  // Etiquetas por defecto

  showLabels: false,
  labelOptions: {
    before: 'Before',
    after: 'After',
    onHover: false
  },

  // Suavizado

  smoothing: true,
  smoothingAmount: 100,

  // Otras opciones

  hoverStart: false,
  verticalMode: false,
  startingPoint: 50,
  fluidMode: false
};
  
// Añade tu objeto de opciones como segundo argumento
const viewer = new ImageCompare(element, options).mount();

Referencias

Sitio Web Oficial: https://image-compare-viewer.netlify.app/

Repositorio de Github: https://github.com/kylewetton/image-compare-viewer

¿Cuál es su reacción?

like
0
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0