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

Я осмотрелся, но не смог найти приличный веб-сайт, который позволил бы нам бесплатно наложить изображение профиля, с простым процессом и без дополнительных водяных знаков. Такие сайты, как ProfileOverlays.com, предоставляют эту услугу, но их предложение для нашей цели начиналось с 250 долларов за установку плюс ежемесячная плата за хостинг. Действительно, для некоммерческого дела, и такое простое дело? Будучи ученым-компьютерщиком, я не мог упустить такую ​​возможность. Спустя всего час поиска и тестирования различных фреймворков я нашел простое решение. Он основан на CamanJS, пакете для работы с изображениями/холстами для JavaScript.

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

Рабочий пример

Нажмите здесь, чтобы перейти на простую страницу с рабочим примером. Не стесняйтесь играть с ним. Кстати, наш оверлей был создан нашим очень талантливым художником-графиком Сандрой Хайнцен.

Как видите, это чрезвычайно простой, но эффективный пример. Он не хранит никаких изображений на вашем сервере и позволяет пользователю просто сохранить новую фотографию своего профиля и установить ее в социальной сети по своему выбору. Никакой прямой социальной интеграции, никаких фильтров, никакой ерунды. Положительная сторона: я бы предположил, что даже если вы не имеете опыта веб-программирования, вы можете заставить это работать менее чем за 30 минут.

Как это настроить

Хорошо, я приступаю к этому. Прежде всего, клонируйте репозиторий или скачайте его пакет и распакуйте его. В полученной папке вы найдете следующие файлы:

caman.full.js
index.php
overlay.png
plain.png

Создайте наложение и изображение-заполнитель

Проявите творческий подход! Назовите получившийся файл overlay.png и замените файл в этой папке. Мы обнаружили, что изображение размером 800x800 пикселей работает лучше всего. Готовое изображение профиля будет иметь те же размеры, что и этот файл. Вы можете воспользоваться нашим примером и создать рамку с полностью прозрачным пространством для изображения или использовать наложение, охватывающее всю фотографию. Через минуту мы точно настроим общую прозрачность изображения, а пока вы можете оставить непрозрачность наложения на полные 100%.

Затем создайте замещающее изображение, которое будет отображаться перед загрузкой изображения пользователем, и сохраните его как plain.png. Вы можете использовать любой заполнитель, который вам нравится, но он должен иметь те же размеры, что и ваш оверлей. Если вы хотите просто использовать накладываемое изображение, имейте в виду, что если оно содержит полностью прозрачные области, вам необходимо заполнить их сплошным цветом, чтобы скрипт работал. Посмотрите файл в папке, чтобы понять, что я имею в виду.

Заставьте веб-страницу работать

Наконец, отредактируйте index.php, чтобы получить желаемое содержимое. Я вставил образец текста и форматирования. Если вы используете PHP-включения, вы также можете просто включить этот файл в одну из существующих страниц вашего веб-сайта.

Пойдем!

Загрузите папку на свой веб-сервер и попробуйте новый оверлей! Выглядит не совсем правильно? Не волнуйтесь, мы собираемся настроить его на следующем шаге.

Дьявол кроется в деталях

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

… и вот! Продолжайте играть, пока вам это не понравится, а затем рекламируйте свой новый инструмент, чтобы ваше [вставьте здесь удивительную причину/событие] стало вирусным!

Идти дальше

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

Несколько вещей, которые нужно иметь в виду

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

  • Если вы хотите, чтобы ваша кампания была успешной, создайте наложение, которое работает с широким спектром изображений. Люди делают сумасшедшие вещи на своих фотографиях — лицо не всегда может быть посередине, изображение может быть черно-белым или с различными фильтрами. Мы протестировали наложение с фотографиями профилей всех 20 членов команды, чтобы убедиться, что оно подходит для разных стилей изображений.
  • Разрешение вашего наложения должно быть не менее 800x800 пикселей, просто чтобы убедиться, что оно хорошо выглядит даже на дисплеях с высоким разрешением (да, Retina хороша).
  • Представленный пример работает только с квадратными изображениями. Если загруженное фото не квадратное, оно будет сжато в одном измерении и будет выглядеть странно. Я уверен, что Каман также поддерживает кадрирование, если вы хотите изучить его (см. ниже).
  • Если вы хотите, чтобы люди могли напрямую устанавливать изображение своего профиля, вам нужно работать с интеграцией Facebook, что значительно усложняет ситуацию. Для нас это не имело значения, потому что мы хотели, чтобы люди размещали свои изображения в разных социальных сетях, поэтому для них было совершенно нормально просто сохранить их на жесткий диск и установить вручную. Однако дерзайте, если посмеете, и дайте мне знать, как все пройдет.
  • Если вы пытаетесь открыть HTML-страницу локально в браузере, это не сработает. Решение простое: загрузите все содержимое каталога на свой веб-сервер для проверки.

Вот и все! Получайте удовольствие, и, пожалуйста, поделитесь, как вы это использовали. Здесь куча методов контакта.