Как можно реализовать такую задумку?

Question

[bqio]

Допустим у меня есть картинка в .png формате с прозрачным фоном. На ней присутствуют некоторые другие картинки более меньшего размера, как тайлмапы. Так вот. Как можно получить эти самые изображения из главной картинки программным способом? Желательно, чтобы это было не квадратом, а полной обводкой. Как такое можно реализовать?

Answer 1

[Илья Мясин]

Могу посоветовать, с чего начать.

1) кладем картинку на canvas
2) получаем при помощи getImageData() массив пикселов
3) пытаемся тыкать в него палочкой

Пункт 3 как бы самый интересный, но тут программировать надо.

Я ради фана соорудил вот такую тупую демку на CodePen, называется "Png to Html". Оттуда можно скопипастить первые два пункта и примерно понять, чо делать с третьим. Оно читает картинку из file-input, кладет на канву, затем считывает попиксельно, и для пикселов, у которых альфа-канал не равен 1 и цвет не белый (точнее avg от rgb < 250) создает DOM-узел, раскрашенный нужным цветом и спозиционированный в нужное место. И обязательно с css-анимацией! +) Так что берегите свои браузеры )))

Дальше вам надо эти пиксели как-то сгруппировать. Я бы начал с чтения статьи Connected-component labeling и гугления слов оттуда с приставкой "js". Придумаете реализацию - расскажите нам =)

А, ну и вместо канвы можно изучить png-декодеры, они бывают для браузера (если у вас только сервер - соответственно, с них и начинаем). Должно работать шустрее, но не так наглядно.

Comments

[bqio]

В общем пока что сделал что-то такое: jsfiddle.net/721xphe1/3
Но почему-то картинка немного исказилась, не знаете, почему?

[bqio]

Исправил. Но можно ли как-то добавить сглаживания? Рисовал с помощью перебора rect svg.

[Илья Мясин]

У вас видимо где-то ошибка в вычислении значения альфа, потому что вот это `rgba(${red}, ${green}, ${blue}, ${alpha})` превращается в rgba(61, 26, 17, 59) - а последняя цифра должна быть от 0 до 1.

Answer 2

[ivanovSP]

Что-то типа этого?
https://cloudinary.com/blog/how_to_automatically_a...

https://davidwalsh.name/remove-photo-backgrounds-c...