JQuery наложение изображений (и избавиться от imagecopymerge)

Question

На моем сайте проекта я объединяю базовое изображение (карту) с маркерами (один и тот же маркер всегда, но повторяется) в соответствии с таблицей в MySQL, используя функцию php imagecopymerge.

Я хочу перенести это в jQuery после обновления изображения, что очень уродливо.

Не могли бы вы подсказать мне лучшее решение?

Большое спасибо.

Answer 1

Правильно ли я считаю, что у вас есть статическое изображение, которое обновляется при взаимодействии с пользователем? Обновления обрабатываются на сервере, и новое «объединенное» изображение отправляется обратно клиенту?

Если это так, вы можете заменить все это небольшим количеством jquery. Хотя будут различия.

Я бы использовал следующую стратегию:

1. Доставить статическую фоновую карту клиенту.
2. Измените любую функцию, которая в данный момент отправляет обратно на сервер, чтобы она вызывала функцию jquery.
3. Эта функция должна создать новое изображение (ваш маркер) и поместить его над соответствующим местом на карте. Вы должны быть в состоянии сделать это с помощью CSS.
4. Функция также должна отслеживать местоположение этих маркеров, чтобы их положение могло быть отправлено обратно на сервер, когда пользователь закончил.

Я рад дать более подробные предложения, если вы можете сказать мне, что именно вам нужно сделать.

Обновление

Хорошо, поэтому, исходя из вашего комментария, я понимаю, что есть таблица базы данных, которая определяет содержание карты. Текущий пользователь не обязательно обновляет его, но вы часто проверяете наличие изменений.

Вы уже используете ajax для выполнения большей части работы, поэтому переход на jquery не сделает слишком много. Я думаю, может быть, вам просто нужно подумать о новом способе обработки нового изображения.

Вы можете попробовать метод двойной буферизации, имея два изображения в одном и том же месте на странице, только одно из которых правильно видно в любой момент.

1. Сделайте тот же звонок на сервер, чтобы проверить наличие изменений и получить изображение. Я предполагаю, что вы получаете новый URL для образа обновления, но если нет, возможно, вам придется сделать что-то подобное.
2. Обновите источник изображения, которое не отображается на странице
3. Показывать скрытое изображение, но только после установки его непрозрачности на 0.
4. Используя jquery, добавьте новое изображение и старую картинку.

Если все сделано правильно, эффект может больше походить на плавное обновление карты, чем на мерцание.