PHP или Javascript или другое - рисовать простые фигуры на изображениях?

Question

У меня в основном есть изображение карты мира, и я хотел бы разместить изображение булавки в указанной пиксельной координате поверх этого изображения карты мира.

Это для веб-сайта, поэтому в идеале это решениедолжен быть в PHP или Javascript (я избегаю Java и Flash, поскольку я хочу, чтобы это было как можно проще).

Я посмотрел на библиотеку processing.js, но это большой и раздутыйпросто для выполнения этой простой задачи.Есть ли уже существующая функция Javascript, которая позволит мне это сделать?Или более простую библиотеку JavaScript, которую я могу использовать?(processing.js был слишком продвинут для меня, я не мог заставить его работать, lol)

С точки зрения PHP-решения, я бы предпочел снять нагрузку с сервера и на клиент для этой задачи, ноЯ все еще хотел бы услышать методы для этого в PHP, если они подходят.

Спасибо!

Answer 1

Самый простой способ сделать это - поместить изображение булавки поверх изображения карты и установить их положение в CSS следующим образом:

<div style="position:relative">
  <img src="map.png" style="position:absolute; top:0px; left:0px; z-index:0"/>
  <img src="pin.png" style="position:absolute; top:50px; left:30px; z-index:1"/>
</div>

Answer 2

Я предлагаю использовать расширение GD Library для PHP. Из этого вы можете манипулировать изображениями и производить новый вывод. Затем вы можете либо кэшировать его где-нибудь и перенаправить пользователя, либо подать изображение, настроив выходные заголовки и записав двоичные данные в стандартный вывод.

header("Content-Type: image/jpeg");

Answer 3

Вы действительно должны иметь это «изображение булавки» в самом изображении? Простой HTML & CSS (абсолютное позиционирование) решит эту проблему очень хорошо, практически без нагрузки для всех участников, с единственным недостатком: изображение не сохраняется с включенным наложенным изображением.

Answer 4

Как уже упоминал Арен, GD хорош для этого.

Однако альтернативой библиотеке GD является Imagemagick . Это нежное введение очень полезно.

ImageMagick® - это программный пакет для создания, редактирования и создания растровых изображений. Он может читать, конвертировать и записывать изображения в различных форматах (более 100), включая DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG и TIFF. Используйте ImageMagick для перевода, зеркального отображения, поворота, поворота, масштабирования, сдвига и преобразования изображений, настройки цветов изображения, применения различных специальных эффектов или рисования текста, линий, многоугольников, эллипсов и кривых Безье.