Генерация PNG с Alpha-каналом в TYPO3
Posted under: Одно из самых замечательных возможностей PNG-изображений конечно же Alpha-канал. Несмотря на то, что ImageMagick поддерживает PNG со всеми возможными функциями, TYPO3 при сохранении изображений не позволяет задать маску alpha-канала. При наложении изображений, комбинировании и т.д. PNG alpha-канал работает без проблем (при соответствующей настройке), но вот заставить результирующий файл содержать alpha-канал не так просто.
Хотя TYPO3 и не дает напрямую задать alpha-канал для генерируемого изображения, есть возможность передавать параметры в ImageMagick, используемый TYPO3 для генерации графики в системе (на ряду с GD). Задав нужные параметры и можно достичь необходимого результата.
Для генерации PNG мы будем использовать параметры ImageMagick: -background white -channel A -combine. Данная комбинация параметров означает слудующее:
- Создать изображение с белым фоном
- Назначит для последующих операций работу с альфа-каналом
- Комбинировать созданное изображение с исходным изображением. С учетом ограничения работы только над альфа-каналом – исходное изображение копируется в альфа-канал созданного изображения
Прежде всего необходимо подготовить маску для alpha-канала. Маска должна быть черно белая. Черный цвет обозначает 100% прозрачность итогового изображения. Серый цвет – частичную
прозрачность:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
10 = = IMG_RESOURCE
10 {
file = GIFBUILDER
file {
XY = [20.w]+5,[20.h]+5
format = png
quality = 100
backColor = #ffffff
20 = TEXT
20 {
text.field = title
text.case = upper
fontSize = 11
fontColor = #000000
fontFile = fileadmin/fonts/tahomabd.ttf
offset = 1,9
niceText = 1
niceText.scaleFactor = 5
}
}
}
|
Теперь созданную маску можно применять для создания PNG. Для того что бы получить имя файла соданного изображения-маски, нужно обратиться в внутренней переменной TSFE: lastImgResourceInfo. Переменная представляет собой массив с информацией о последнем сгенерированном изображении функцией IMG_RESOURCE. Если для генерации использовалась функция IMAGE, то аналогичная информация будет размещаться в переменной TSFE:lastImageInfo. Поскольку я использую PNG для задания фона, то меня интересуют в этом массиве так же и размеры маски, что бы задать правильные размеры блоку для которого будет определяться фон.
Налоджение маски альфа-канала (продолжение предыдущего листинга):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
stdWrap.override.cObject = COA
stdWrap.override.cObject {
10 = TEXT
10.data = TSFE:lastImgResourceInfo|0
10.noTrimWrap= |style="width:|px;|
20 = IMG_RESOURCE
20 {
file.import.data = TSFE:lastImgResourceInfo|3
file.params = -background white -channel A -combine
stdWrap.noTrimWrap = |background-image:url(|);"|
}
}
|
И финальный рабочий код меню с PNG:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
10 = HMENU
10 {
wrap = <ul id="menu-main">|</ul>
1 = TMENU
1.NO.allWrap = <li class="first">| |*|<li>|
1.NO.wrapItemAndSub = |</li>
1.NO.ATagParams.cObject = IMG_RESOURCE
1.NO.ATagParams.cObject {
# Generate mask with text
file = GIFBUILDER
file {
XY = [20.w]+5,[20.h]+5
format = png
quality = 100
backColor = #ffffff
20 = TEXT
20 {
text.field = title
text.case = upper
fontSize = 11
fontColor = #000000
fontFile = fileadmin/fonts/tahomabd.ttf
offset = 1,9
niceText = 1
niceText.scaleFactor = 5
}
}
# Generate image with appliyed Mask to alpha chanel
stdWrap.override.cObject = COA
stdWrap.override.cObject {
10 = TEXT
10.data = TSFE:lastImgResourceInfo|0
10.noTrimWrap= |style="width:|px;|
15 = TEXT
15.data = TSFE:lastImgResourceInfo|1
15.noTrimWrap = | height:|px;|
20 = IMG_RESOURCE
20 {
file.import.data = TSFE:lastImgResourceInfo|3
file.params = -background white -channel A -combine
stdWrap.noTrimWrap = |background-image:url(|);"|
}
}
}
}
|
Несмотря на то что меню графическое, оно полностью “SEO-безопастное”, так как содержит в HTML текст пункта. Что бы текст не отображался в поверх картинки используем известный css-tric: #menu-main li a { display:block; text-indent:-9999px; }. Результат работы данного кода следующий:
Конечно в данном случае рассматривается только генерация одноцветных изображений с маской (надписей). К сожалению я не очень силен в работе с ImageMagick и не знаю как можно правильно скомбинировать готовое изображение с альфа-каналом. Если кто то поможет и покажет какие параметры задаются для ImageMagick, то я смогу продемонстрировать TypoScript для генерация произвольного изображения с использованием PNG-alpha.
