Генерация PNG с Alpha-каналом в TYPO3

Павел Антонов — Thu, 25 Sep 2008 08:40:41 +0000

Одно из самых замечательных возможностей PNG-изображений конечно же Alpha-канал. Несмотря на то, что ImageMagick поддерживает PNG со всеми возможными функциями, TYPO3 при сохранении изображений не позволяет задать маску alpha-канала. При наложении изображений, комбинировании и т.д. PNG alpha-канал работает без проблем (при соответствующей настройке), но вот заставить результирующий файл содержать alpha-канал не так просто.

Хотя TYPO3 и не дает напрямую задать alpha-канал для генерируемого изображения, есть возможность передавать параметры в ImageMagick, используемый TYPO3 для генерации графики в системе (на ряду с GD). Задав нужные параметры и можно достичь необходимого результата.

Для генерации PNG мы будем использовать параметры ImageMagick: -background white -channel A -combine. Данная комбинация параметров означает слудующее:

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

Прежде всего необходимо подготовить маску для alpha-канала. Маска должна быть черно белая. Черный цвет обозначает 100% прозрачность итогового изображения. Серый цвет – частичную
прозрачность:

  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 для задания фона, то меня интересуют в этом массиве так же и размеры маски, что бы задать правильные размеры блоку для которого будет определяться фон.

Налоджение маски альфа-канала (продолжение предыдущего листинга):

        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:

    10 = HMENU
    10 {
      wrap = |
      1 = TMENU
 
      1.NO.allWrap = | |*|
|
      1.NO.wrapItemAndSub = |
 
 
      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.

Codeline » png

Генерация PNG с Alpha-каналом в TYPO3