Возможно ли в сайт встроить картинку, на которой поверх нужно кое-что нарисовать?

Здравствуйте!

Возникла необходимость делать следующее: в определенной форме человек вводит координаты x, y и радиус круга. Необходимо "склеить" нужные регионы, нарисовать поверх круг нужного радиуса и вывести готовую картинку на сайт.

Что имеем? Большое количество картинок по типу royal-vanilla.space/map_new/tile.0.0.png где 0 0 - регион. 0 0 генерируется по следующему типу: первый ноль это координата x от 0 до 511, второй 0 y от 0 до 511, а например 1 0 это 512 - 1023 0 - 511 соответственно. ТОЕСТЬ простое деление с округлением в меньшую сторону (битовый сдвиг). Замечу, что координаты могут быть так же отрицательными, то есть x -100 y -100. Помимо этого на той картинке (ссылка выше) регион выглядит следующим образом: левый верхний угол это x 0 y 0, а правый нижний x 511 y 511.

Вопрос состоит в следующем: как можно склеить какой-либо библиотекой картинки, а после поверх нарисовать необходимый радиус? А после вывести эту картинку на сайт/сохранить в каталог и тп.
И можно ли вообще это сделать? Есть ли такие библиотеки в js или как лучше это реализовать?

Сейчас есть готовая программа на паскале, которая может делать это на компьютере. Но как реализовать это в вебе не представляю.

Приведу пример:
b2452666bcf22631514c346438d70b7abd439f56

Координаты -4200 -2000
Радиус R=500

Заранее спасибо за ответ. Если будут вопросы, опишу подробно в комментариях!
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 3
IceRD
@IceRD
В PHP для работы с графикой есть GD php.net/manual/ru/book.image.php
Если требуется интерактивное, в таком случае можно посмотреть leafletjs.com
пример psousa.net/demos/zoom-images
Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
Если прямо в браузере, то canvas умеет и рисовать линии/круги/прямоугольники/что угодно
и склеивать, и накладывать картинки.
Пример: https://jsfiddle.net/Stalk/0gc4x7qw/ (кликните на кота)
Библиотек для работы с canvas хватает, на них даже игрушки делают.

Если на сервере, то GD умеет много всякого делать с картинками, а если вдруг его возможностей не хватит, то есть ImageMagick.
Ответ написан
Комментировать
webinar
@webinar Куратор тега PHP
Учим yii: https://youtu.be/-WRMlGHLgRg
canvas
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы