Водяные знаки на изображениях в OpenCart

Как добавить водяной знак к изображениям в OpenCart?

Возможно, этот вопрос беспокоит многих владельцев интернет магазинов. В особенности тех, кто тратит много времени и/или денег на съёмку и подготовку изображений своего товара.
И мне, как программисту, пришлось столкнуться с этой задачей. Итак, что нужно было сделать:
  • Добавить возможность наложения водяных знаков (watermark) для определённых изображений.

В данном случае — для больших изображений. Накладывать водяной знак «watermark» на изображения с маленькими размерами мы не видим смысла (маленькие изображения никто не будет воровать, а даже если и да, то он не читается на них всё равно).

Приступим к реализации! Хочу сразу заметить, что магазин в котором я это делал сильно отличается от стандартного OpenCart-овского и код я буду приводить небольшими примерами, чтоб показать общую идеологию.

Встроенная функциональность
В OpenCart есть уже функция для создания watermark, но она не работает (А потому немного изменим её)


Узнать, как добавить водяной знак в OpenCart...

Предварительная загрузка изображений

Потребности
Для чего нам нужна предварительная загрузка изображений? Чаще всего мы используем её для качественно прорисовки интерфейсов, элементов управления сайта.

Пример:
Есть скрипт галереи или текстовые блоки с возможностью перемещения (туда/сюда). За управление перемещением отвечают графические стрелки. При наведении на стрелку её изображение заменяется на другое.
Что делает браузер при наведении? Он отправляет запрос на изображение к серверу. Даже при очень быстром ответе будет замечен эффект «подмаргивания». Если выполнить предварительную загрузку изображений — этого не произойдёт.

Применение
В современной вёрстке этот подход используется редко. Гораздо предпочтительнее использовать CSS Sprites. Но, если нет такой возможности и Вам действительно это надо — добро пожаловать под кат.

Читать дальше