How to implement a photo mosaic in js?

U

Username2019-04-09 20:27:18

JavaScript

Username, 2019-04-09 20:27:18

Good evening!
There is a base with photographs, there is a logo, it is necessary that a logo be formed from live photographs, if the photo crawls out of the edges, then it is necessary to crop it in the shape of the logo.
How can this be implemented?
Video example: zabavadigital.ru/projects/photo-logo

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

S

Sergey, 2019-04-09
@vazonov

You can do it through canvas, you can do it through Node.js.
A complex algorithm:
- Read the image data (width, height)
- "Get" those pixels that are not equal to the background color (for example, a picture of a white background, and logo letters are black) - let's call them "positive"
- Group the entire image into cells of certain dimensions (for example, 1 cell is 50x50 px, select the dimensions based on step 1)
- "Paint" the cells with the necessary picture
- Find the intersections of cells and "positive" pixels
- Display those cells that intersect with "positive" pixels
Simple algorithm: as comrade iBird Rose advised , use masks
Ready-made options:
https://github.com/gustavomazzoni/photo-mosaic
https://github.com/cemiltokatli/PhotoMosaic

I

iBird Rose, 2019-04-09
@iiiBird

google clip-path and svg masks. for example:
css.yoksel.ru/svg-masks
css.yoksel.ru/css-and-svg-masks
https://css-tricks.com/clipping-masking-css/
well, how to arrange photos, I think just google