So, I have a stack of ~10 images layered on top of each other via a for loop. I need to be able to click them individually, but the images are all 1080x1350. The images are mainly transparent with a small area of non-transparency, so I'm wondering how I would crop them to only include the non-transparent pixels while retaining the same position. I'm extremely new to javascript, so keep that in mind when explaining stuff to me :)

Imagine this is the input image. The blue background are the transparent pixels, for example's sake. I would want to crop them to receive this output image while retaining the same position on the website, and keep on doing it until the for loop ends.

Here is what I currently have, it takes from a js file storing variables about the file paths of each image, and places them ontop of each other

$(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="">`)
}

js file:

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"
}

};