How can such an idea be realized?

Question

JavaScript

Let's say I have a picture in .png format with a transparent background. It has some other smaller pictures as tilemaps. So. How can I get these very images from the main image programmatically? It is desirable that this is not a square, but a full stroke. How can this be implemented?

Answer 1

I can advise where to start.
1) put the image on the canvas 2) get an array of pixels
using getImageData()
3) try to poke it with a stick
Point 3 seems to be the most interesting, but here you need to program.
For fun, I built such a stupid demo on CodePen , called "Png to Html". From there, you can copy-paste the first two points and roughly understand what to do with the third. It reads the image from the file-input, puts it on the canvas, then reads it pixel by pixel, and for pixels that have an alpha channel not equal to 1 and the color is not white (more precisely, avg from rgb < 250) creates a DOM node painted with the desired color and positioned to the right place. And of course with css animation! +) So take care of your browsers )))
Then you need to group these pixels somehow. I would start by reading the Connected-component labeling article and googling the "js" words from there. Come up with an implementation - tell us =)
Oh, well, instead of a canvas, you can study png decoders, they are for the browser (if you only have a server, we start with them, respectively). Should work faster, but not so visually.

Answer 2

Something like this?
https://cloudinary.com/blog/how_to_automatically_a...
https://davidwalsh.name/remove-photo-backgrounds-c...