Масштабирование и наложение водяного знака на лету

Вопрос наложения водяного знака давно не вопрос. И на лету его тоже нет проблем наложить.

Проблема появилась при необходимости масштабирования водяного знака, чтобы он при любом финальном размере фото товара занимал всю доступную ширину уменьшенного фото или чуть меньше.

Сначала посмотрим на результаты, чего хотелось бы достичь.

Список товаров

Список товаров с водяным знаком применном при сохранении фото в инфоблок.

Список товаров с водяным знаком применном при сохранении фото в инфоблок

На данном примере показано, что будет если водяной знак очень большой (больше фото товара).

Список товаров с водяным знаком применном при сохранении фото в инфоблок

Список товаров с масштабированным водяным знаком (наша цель).

Список товаров с масштабированным водяным знаком

Карточка товара

Карточка товара с водяным знаком применном при сохранении фото в инфоблок.

Карточка товара с водяным знаком применном при сохранении фото в инфоблок

Карточка товара с масштабированным водяным знаком (наша цель).

Карточка товара с масштабированным водяным знаком

Карточка товара, большое фото

Карточка товара (большое фото) с водяным знаком применном при сохранении фото в инфоблок.

Карточка товара (большое фото) с водяным знаком применном при сохранении фото в инфоблок

Карточка товара (большое фото) с масштабированным водяным знаком (наша цель).

Карточка товара (большое фото) с масштабированным водяным знаком

Решение задачи

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

Для решения данной задачи:

  • нужно хранить в инфоблоке оригинальное фото
  • нужен водяной знак большого размера (но не больше самого большого размера фото на сайте, для которого он будет применяться)
  • нужно вычислить итоговый размер фото товара после ресайза (А)
  • создать уменьшенный вариант водяного знака (А) * 0.95
  • применить фильтр с уменьшенным водяным знаком к фото товара

Код рабочий, можно сразу использовать:

<?php
// фильтры применяемые к фото товара, которое будем уменьшать
$arFilters = Array();

/*
* 1) получаем размер ($arDestinationSize) итоговой картинки (фото товара) после ресайза, с учетом типа ресайза ($resizeType)
* 2) создаем водяной знак под этот размер фото (он должен быть чуть меньше самого фото)
* 3) формируем фильтр для наложения знака
* */
$imgId      = $product["PREVIEW_PICTURE"];
$width      = 320;
$height     = 320;
$resizeType = BX_RESIZE_IMAGE_EXACT; // или BX_RESIZE_IMAGE_PROPORTIONAL
$watermark = $_SERVER['DOCUMENT_ROOT'] . "/upload/watermark/watermark_original.png";

if (is_readable($watermark)) {
    $bNeedCreatePicture = $arSourceSize = $arDestinationSize = false;
    $imgSize = CFile::GetImageSize( $_SERVER["DOCUMENT_ROOT"] .  CFile::GetPath($imgId) );
    CFile::ScaleImage($imgSize["0"], $imgSize["1"], array("width" => $width, "height" => $height), $resizeType, $bNeedCreatePicture, $arSourceSize, $arDestinationSize);

    $koef = 0.95;
    $watermarkResized = $_SERVER['DOCUMENT_ROOT'] . "/upload/watermark/watermark_" . $arDestinationSize["width"] * $koef . ".png";

    if (!is_readable($watermarkResized))
    CFile::ResizeImageFile($watermark, $watermarkResized, array("width" => $arDestinationSize["width"] * $koef, "height" => $arDestinationSize["height"] * $koef), BX_RESIZE_IMAGE_PROPORTIONAL, false, 95, array());

    if (is_readable($watermarkResized))
    $arFilters[] = Array(
        "name"     => "watermark",
        "position" => "center",
        "size"     => "real",
        "file"     => $watermarkResized
    );
}

$resizedImg = CFile::ResizeImageGet($imgId, array("width" => $width, "height" => $height), $resizeType, false, $arFilters, false, 100);
?>

Подведем итоги

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

Полезные ссылки

Комментарии

Форма для связи

Контакты
Telegram:

по запросу

Skype:

по запросу

Телефон:

по запросу

Город:

Санкт-Петербург