Водяные знаки с ImageMagick

В статье «Водяной знак в WordPress» написаны названия плагинов для этой CMS, но не все пользуются этим движком для создания сайта. В этой статье я покажу вам, как добиться подобного эффекта, используя Imagick, его можно использовать для любого веб-приложения, но возможности Imagick ограничиваются обычным текстом в отличии от плагинов.

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

Случайное изображение
Случайное изображение

Рисование текста на изображении

Самый простой тип текстового водяного знака для создания, является строка наложение поверх изображения.
Пример командной строки:



convert image.png  -font Arial -pointsize 20 \
    -draw "gravity south
        fill black  text 0,12 'Copyright'
        fill white  text 1,11 'Copyright'" \
    result.png


И эквивалентно PHP является:



<?php
// Create objects
$image = new Imagick('image.png');

// Watermark text
$text = 'Copyright';

// Create a new drawing palette
$draw = new ImagickDraw();

// Set font properties
$draw->setFont('Arial');
$draw->setFontSize(20);
$draw->setFillColor('black');

// Position text at the bottom-right of the image
$draw->setGravity(Imagick::GRAVITY_SOUTHEAST);

// Draw text on the image
$image->annotateImage($draw, 10, 12, 0, $text);

// Draw text again slightly offset with a different color
$draw->setFillColor('white');
$image->annotateImage($draw, 11, 11, 0, $text);

// Set output image format
$image->setImageFormat('png');

// Output the new image
header('Content-type: image/png');
echo $image;
?>


В результате:

Простой пример Text Watermarks
Простой пример

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

Прозрачный текст с помощью шрифта Mask

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



convert -size 300x50 xc:grey30 -font Arial -pointsize 20 \
    -gravity center -draw "fill grey70  text 0,0  'Copyright'" \
    fgnd.png
convert -size 300x50 xc:black -font Arial -pointsize 20 -gravity center \
    -draw "fill white  text  1,1  'Copyright'
        text  0,0  'Copyright'
        fill black  text -1,-1 'Copyright'" \
    +matte mask.png
composite -compose CopyOpacity  mask.png  fgnd.png  stamp.png \
    mogrify -trim +repage stamp.png
composite -gravity south -geometry +0+10 stamp.png  image.png \
    result.png


PHP эквивалентны:



<?php
// Create objects
$image = new Imagick('image.png');
$watermark = new Imagick();
$mask = new Imagick();
$draw = new ImagickDraw();

// Define dimensions
$width = $image->getImageWidth();
$height = $image->getImageHeight();

// Create some palettes
$watermark->newImage($width, $height, new ImagickPixel('grey30'));
$mask->newImage($width, $height, new ImagickPixel('black'));

// Watermark text
$text = 'Copyright';

// Set font properties
$draw->setFont('Arial');
$draw->setFontSize(20);
$draw->setFillColor('grey70');

// Position text at the bottom right of the image
$draw->setGravity(Imagick::GRAVITY_SOUTHEAST);

// Draw text on the watermark palette
$watermark->annotateImage($draw, 10, 12, 0, $text);

// Draw text on the mask palette
$draw->setFillColor('white');
$mask->annotateImage($draw, 11, 13, 0, $text);
$mask->annotateImage($draw, 10, 12, 0, $text);
$draw->setFillColor('black');
$mask->annotateImage($draw, 9, 11, 0, $text);

// This is needed for the mask to work
$mask->setImageMatte(false);

// Apply mask to watermark
$watermark->compositeImage($mask, Imagick::COMPOSITE_COPYOPACITY, 0, 0);

// Overlay watermark on image
$image->compositeImage($watermark, Imagick::COMPOSITE_DISSOLVE, 0, 0);

// Set output image format
$image->setImageFormat('png');

// Output the new image
header('Content-type: image/png');
echo $image;
?>


В результате:

Прозрачный текст watermark с помощью шрифта Mask
Прозрачный текст watermark с помощью шрифта Mask

Несколько изображений, созданных на данном примере. Первое изображение водяного знака $watermark на сером фоне, а второе изображение $mask использует чистый черный цвет для части текста, которая должна быть прозрачной а белую часть текста сохраним. Когда я нанесём маску путем объединения изображений, любые оттенки серого найдены в $mask сглаживаются, и текст будет полупрозрачным и в результате гладкие края.

В консольной версии кода, внешним краям прозрачное изображение будет урезано до водяной знак-это наезжает, но там, по-видимому это ошибка , которая не позволяет методу compositeImage() сохранять позиции, определяемые setGravity() . В основном это означает, что, если хочу, чтобы обрезать края потом мой водяной знак будет терять свое место в правом нижнем углу и будет повторно позиционироваться в верхнем левом углу. Чтобы обойти это глупое поведение, нудно создать палитры с теми же размерами, как исходные изображения, и отсечения не будет происходит.

Плиточный текст

Последний пример текст по всему изображению, что делает его гораздо более трудно удалить.
Командная строка:



convert -size 140x80 xc:none -fill grey \
    -gravity NorthWest -draw "text 10,10 'Copyright'" \
    -gravity SouthEast -draw "text 5,15 'Copyright'" \
    miff:- | \
composite -tile - image.png  result.png


PHP:



<?php
// Create objects
$image = new Imagick('image.png');
$watermark = new Imagick();

// Watermark text
$text = 'Copyright';

// Create a new drawing palette
$draw = new ImagickDraw();
$watermark->newImage(140, 80, new ImagickPixel('none'));

// Set font properties
$draw->setFont('Arial');
$draw->setFillColor('grey');
$draw->setFillOpacity(.5);

// Position text at the top left of the watermark
$draw->setGravity(Imagick::GRAVITY_NORTHWEST);

// Draw text on the watermark
$watermark->annotateImage($draw, 10, 10, 0, $text);

// Position text at the bottom right of the watermark
$draw->setGravity(Imagick::GRAVITY_SOUTHEAST);

// Draw text on the watermark
$watermark->annotateImage($draw, 5, 15, 0, $text);

// Repeatedly overlay watermark on image
for ($w = 0; $w < $image->getImageWidth(); $w += 140) {
    for ($h = 0; $h < $image->getImageHeight(); $h += 80) {
        $image->compositeImage($watermark, Imagick::COMPOSITE_OVER, $w, $h);
    }
}

// Set output image format
$image->setImageFormat('png');

// Output the new image
header('Content-type: image/png');
echo $image;
?>


Результат:

Плиточный текст Watermarks
Плиточный текст Watermarks

Обратите внимание, что прозрачность в установках setFillOpacity() , а не в изображении маски.

В заключение

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

Статья подготовлена для вас коллективом сайта www.pixelcom.crimea.ua
Оригинал статьи: phpmaster.com/adding-text-watermarks-with-imagick
Перевел: Виктор Клим
Правила использования материалов сайта!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>