Entonces, tengo una pila de ~ 10 imágenes superpuestas a través de un bucle for. Necesito poder hacer clic en ellos individualmente, pero las imágenes son todas de 1080x1350. Las imágenes son principalmente transparentes con una pequeña área sin transparencia, por lo que me pregunto cómo las recortaría para incluir solo los píxeles no transparentes y mantener la misma posición. Soy extremadamente nuevo en javascript, así que tenlo en cuenta cuando me expliques cosas :)

Imagina que esta es la imagen de entrada . El fondo azul son los píxeles transparentes, por ejemplo. Me gustaría recortarlos para recibir esta imagen de salida manteniendo la misma posición en el sitio web, y seguir haciéndolo hasta que finalice el bucle for.

Esto es lo que tengo actualmente, toma de un archivo js que almacena variables sobre las rutas de archivo de cada imagen y las coloca una encima de la otra

 $(function () { for (const [index] of Object.entries(data)) { var filePath = data[index].file; $(".images").append(`<div class="${index}"></div>`) $(`.${index}`).append(`<img src="${filePath}" alt="">`) }

archivo js:

 const data = { "001": { "file": "images2/Box.png", }, "002": { "file": "images2/Floor.png", }, "003": { "file": "images2/Person.png", }, "004":{ "file": "images2/Cube2.png" }, "005":{ "file": "images2/Top pillar.png" }, "006":{ "file": "images2/Trees.png" } };