Главная › Кодинг › Правильный ресайз прозрачных картинок на PHP

Правильный ресайз прозрачных картинок на PHP

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

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

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

Как всем известно, в вебе обычно используется три формата изображений: PNG, GIF, JPEG. Соответственно прозрачными могут быть только PNG и GIF. А JPEG прозрачность не поддерживает. То есть наша задача состоит в том чтобы разобраться как правильно ресайзить PNG и GIF. У этих форматов прозрачность реализованна по-разному, и обрабатывать их надо соответственно по-разному.

Ресайзим PNG

Я думаю ни для кого не секрет, что в PNG реализованна поддержка альфа канала. То есть цвет задается четырмя компонентами: R (красный), G (зеленый), B (синий), альфа. Альфа канал задает прозрачность конкретного пикселя. Впрочем это все вы должны уже знать, перейдем к сути.

Причин появления черного фона при ресайзе PNG три:

Программист создает не полноцветное изображение. Т.е. использует функцию imagecreate вместо imagecreatetruecolor
Программист забывает отключить наложение прозрачного цвета (или если правильно — «режим сопряжения цветов») с помощью функции imagealphablending. Дело в том что imagecreatetruecolor создает изображение с черным фоном. При включенном «режиме сопряжения цветов» прозрачный пиксель, не заменит фон, а будет рассчитан новый цвет в соответствии с новым цветом и цветом фона с учетом альфа канала обоих цветов — в итоге для полностью прозрачного пикселя получаем фоновой цвет — т.е. черный.
Программист не включает сохранение альфа канала в выходной файл. За это отвечает функция imagesavealpha

Чтож, с причинами разобрались. Теперь реализация правильного ресайза PNG картинки:

//Создаем полноцветное изображение
$destination_resource=imagecreatetruecolor($newwidth, $newheight);

//Отключаем режим сопряжения цветов
imagealphablending($destination_resource, false);

//Включаем сохранение альфа канала
imagesavealpha($destination_resource, true);

//Ресайз
imagecopyresampled($destination_resource, $source_resource, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

//Сохранение
imagepng($destination_resource, $destination_path);

//Создаем полноцветное изображение

$destination_resource=imagecreatetruecolor($newwidth, $newheight);

//Отключаем режим сопряжения цветов

imagealphablending($destination_resource, false);

//Включаем сохранение альфа канала

imagesavealpha($destination_resource, true);

//Ресайз

imagecopyresampled($destination_resource, $source_resource, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

//Сохранение

imagepng($destination_resource, $destination_path);

Ресайзим GIF

А вот GIF-е прозрачность реализованна по-другому. В нем один из используемых цветов (любой, на выбор автора картинки) объявляется как прозрачный, и при отрисовке данной картинки пиксели имеющие данный цвет заменяются прозрачными пикселями. Такая вот «псевдо-прозрачность»:

И единственная причина по которой может появится фон в прозрачной GIF — программист забывает указать «прозрачный» цвет.

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

//Создаем изображение, кстати для GIF можно использовать обычную imagecreate, но лучше все таки везде использовать imagecreatetruecolor
$destination_resource=imagecreatetruecolor($newwidth, $newheight);

//Получаем прозрачный цвет
$transparent_source_index=imagecolortransparent($source_resource);

//Проверяем наличие прозрачности
if($transparent_source_index!==-1){
	$transparent_color=imagecolorsforindex($source_resource, $transparent_source_index);

	//Добавляем цвет в палитру нового изображения, и устанавливаем его как прозрачный
	$transparent_destination_index=imagecolorallocate($destination_resource, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
	imagecolortransparent($destination_resource, $transparent_destination_index);

	//На всякий случай заливаем фон этим цветом
	imagefill($destination_resource, 0, 0, $transparent_destination_index);
}

//Ресайз
imagecopyresampled($destination_resource, $source_resource, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

//Сохранение
imagegif($destination_resource, $destination_path);

//Создаем изображение, кстати для GIF можно использовать обычную imagecreate, но лучше все таки везде использовать imagecreatetruecolor

$destination_resource=imagecreatetruecolor($newwidth, $newheight);

//Получаем прозрачный цвет

$transparent_source_index=imagecolortransparent($source_resource);

//Проверяем наличие прозрачности

if($transparent_source_index!==-1){

$transparent_color=imagecolorsforindex($source_resource, $transparent_source_index);

//Добавляем цвет в палитру нового изображения, и устанавливаем его как прозрачный

$transparent_destination_index=imagecolorallocate($destination_resource, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);

imagecolortransparent($destination_resource, $transparent_destination_index);

//На всякий случай заливаем фон этим цветом

imagefill($destination_resource, 0, 0, $transparent_destination_index);

}

//Ресайз

imagecopyresampled($destination_resource, $source_resource, 0, 0, 0, 0, $newwidth, $newheight, $oldwidth, $oldheight);

//Сохранение

imagegif($destination_resource, $destination_path);

Можно конечно, чуть короче и проще, но на мой взгляд так намного нагляднее.

Вывод

А мораль сей басни такова — делайте бекапы) Причем здесь бекапы? А при том… Из-за того что я не учел прозрачность при ресайзе, я запарол несколько тысяч прозрачных картинок у клиента. И слава богу что я таки сделал полный бекап еще до внесения изменений, из которого впоследствии востановил картинки обратно.

mr.The 30.12.2012 в 15:19

Именно по этому стоит использовать фреймворки и либы. За пару команд можно сделать всё тоже самое даже не задумываясь, что там внутри.

Ответить ↓
1. Дмитрий Амиров Автор30.12.2012 в 16:29
  
  Пожалуй да, это наилучший выход…
  
  Ответить ↓
  1. mr.The 30.12.2012 в 16:49
    
    Хотя, при этом есть 1 минус. Когда нужно сделать что-то ну совсем нестандартное — приходится лезть в максимально низкий, для языка, уровень, и делать это там. Например, я одно время, вообще не писал sql, мне хватало рельсового activerecord. А потом понадобилось оптимизировать скорость пары запросов, и вот тут началось.. За-то, теперь почти специалист в этом)
    
    Ответить ↓
REZIDENT 09.02.2013 в 05:38

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

Ответить ↓
1. REZIDENT 09.02.2013 в 05:40
  
  И кстате добавлю пожалуй ваш блог в закладки думаю не раз еще понадобится может чего и полезного тут найду :)
  
  Ответить ↓
  1. Дмитрий Амиров Автор09.02.2013 в 06:43
    
    Спасибо, очень приятно слышать =)
    
    Ответить ↓

progmist 13.02.2013 в 17:06

Заметил ошибку у вас в коде про то как быть с псевдо-прозрачностью в gif:

//Проверяем наличие прозрачности
if($transparent_source_index!==-1){
$transparent_color=imagecolorsforindex($source_resource, $transparent_source_index);

//Добавляем цвет в палитру нового изображения, и устанавливаем его как прозрачный
$transparent_destination_index=imagecolorallocate($destination_resource, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);
imagecolortransparent($destination_resource, $transparent_destination_index);

//На всякий случай заливаем фон этим цветом
imagefill($destination_resource, 0, 0, $transparent_destination);
}

//Проверяем наличие прозрачности

if($transparent_source_index!==-1){

$transparent_color=imagecolorsforindex($source_resource, $transparent_source_index);

//Добавляем цвет в палитру нового изображения, и устанавливаем его как прозрачный

$transparent_destination_index=imagecolorallocate($destination_resource, $transparent_color['red'], $transparent_color['green'], $transparent_color['blue']);

imagecolortransparent($destination_resource, $transparent_destination_index);

//На всякий случай заливаем фон этим цветом

imagefill($destination_resource, 0, 0, $transparent_destination);

}

Где «На всякий случай заливаем фон этим цветом» переменная цвета $transparent_destination не существует
нужно: $transparent_destination_index

Ответить ↓

Дмитрий Амиров Автор13.02.2013 в 18:06

спасибо, исправил =)

Ответить ↓

Андрей 07.03.2014 в 13:47

я так понимаю, скрипт ресайза гифки не распространяется на анимацию?

Ответить ↓
1. Дмитрий Амиров Автор09.03.2014 в 16:08
  
  Боюсь что нет. Мне не приходилось сталкиваться с ресайзом анимированных гифок.
  
  Ответить ↓
Zyets 15.03.2014 в 15:34

Ааааа! пасибо огромное!
Все просто и понятно! Люблю когда вот так, прям как для чайников))))

Ответить ↓
1. Дмитрий Амиров Автор15.03.2014 в 20:19
  
  И вам спасибо за позитивный комментарий)
  
  Ответить ↓
Freqnsy 18.12.2014 в 01:08

Не работает. Уменьшает но фон черный!

Ответить ↓
1. Дмитрий Амиров Автор18.12.2014 в 02:00
  
  Боюсь что где то у Вас все же ошибка.
  
  Ответить ↓

Мария 10.01.2015 в 16:17

У меня тоже черный фон. Посмотрите, пожалуйста, где ошибка… Заранее, спасибо.

function resize($target, $dest, $wmax, $hmax, $ext){

    /*
    $target - путь к оригинальному файлу
    $dest - путь сохранения обработанного файла
    $wmax - максимальная ширина
    $hmax - максимальная высота
    $ext - расширение файла
    */
    list($w_orig, $h_orig) = getimagesize($target);
    $ratio = $w_orig / $h_orig; // =1 - квадрат, 1 - книжная

    if(($wmax / $hmax) > $ratio){
        $wmax = $hmax * $ratio;
    }else{
        $hmax = $wmax / $ratio;
    }
    
    $img = "";

	switch($ext){
        case(".gif"):
            $img = imagecreatefromgif($target);
            break;
        case(".png"):
            $img = imagecreatefrompng($target);
            break;
		case(".jpeg"):
            $img = imagecreatefromjpeg($target);
            break;
		case(".jpg"):
            $img = imagecreatefromjpeg($target);
            break;
        default:
            $img = imagecreatefromjpeg($target);    
    }  
    $newImg = imagecreatetruecolor($wmax, $hmax); // создаем оболочку для новой картинки
	
	//Отключаем режим сопряжения цветов
	imagealphablending($destination_resource, false);
    
    if($ext == "png"){
        imagesavealpha($newImg, true); // сохранение альфа канала
        $transPng = imagecolorallocatealpha($newImg,0,0,0,127); // добавляем прозрачность
        imagefill($newImg, 0, 0, $transPng); // заливка  
    }
    
    imagecopyresampled($newImg, $img, 0, 0, 0, 0, $wmax, $hmax, $w_orig, $h_orig); // копируем и ресайзим изображение
    switch($ext){
        case("gif"):
            imagegif($newImg, $dest);
            break;
        case("png"):
            imagepng($newImg, $dest);
            break;
        default:
            imagejpeg($newImg, $dest);    
    }
    imagedestroy($newImg);
}

function resize($target, $dest, $wmax, $hmax, $ext){

$target - путь к оригинальному файлу

$dest - путь сохранения обработанного файла

$wmax - максимальная ширина

$hmax - максимальная высота

$ext - расширение файла

list($w_orig, $h_orig) = getimagesize($target);

$ratio = $w_orig / $h_orig; // =1 - квадрат, 1 - книжная

if(($wmax / $hmax) > $ratio){

$wmax = $hmax * $ratio;

}else{

$hmax = $wmax / $ratio;

}

$img = "";

switch($ext){

case(".gif"):

$img = imagecreatefromgif($target);

break;

case(".png"):

$img = imagecreatefrompng($target);

break;

case(".jpeg"):

$img = imagecreatefromjpeg($target);

break;

case(".jpg"):

$img = imagecreatefromjpeg($target);

break;

default:

$img = imagecreatefromjpeg($target);

}

$newImg = imagecreatetruecolor($wmax, $hmax); // создаем оболочку для новой картинки

//Отключаем режим сопряжения цветов

imagealphablending($destination_resource, false);

if($ext == "png"){

imagesavealpha($newImg, true); // сохранение альфа канала

$transPng = imagecolorallocatealpha($newImg,0,0,0,127); // добавляем прозрачность

imagefill($newImg, 0, 0, $transPng); // заливка

}

imagecopyresampled($newImg, $img, 0, 0, 0, 0, $wmax, $hmax, $w_orig, $h_orig); // копируем и ресайзим изображение

switch($ext){

case("gif"):

imagegif($newImg, $dest);

break;

case("png"):

imagepng($newImg, $dest);

break;

default:

imagejpeg($newImg, $dest);

}

imagedestroy($newImg);

}

Ответить ↓

OLWerd 23.07.2015 в 20:44

Это явно не для чайников — «будет рассчитан новый цвет в соответствии с новым цветом и цветом фона с учетом альфа канала обоих цветов»

Ответить ↓
1. Дмитрий Амиров Автор23.07.2015 в 20:45
  
  Честно сказать не знаю как это можно переформулировать, даже после того как вы сакцентировали на этом внимание… но вроде понятно же, нет?
  
  Ответить ↓

Евгений 07.10.2015 в 22:08

Спасибо за разъяснение, но почему-то никак не могу добиться прозрачности водяного знака при наложении его на картинку. Вот такой код:

$picture = ImageCreateTrueColor($arDestinationSize["width"], $arDestinationSize["height"]);
imagealphablending( $picture, false);
imagesavealpha( $picture, true);
$pngWaterMarkImg = @imagecreatefrompng($_SERVER["DOCUMENT_ROOT"] . $arWaterMark["path_to_watermark"]);
imagecopyresampled($picture, $pngWaterMarkImg, ($arPictureSize["x"] - $newwidth) / 2, ($arPictureSize["y"] - $newheight) / 2, 0, 0, $newwidth, $newheight, $arWaterMarkImgSize['x'], $arWaterMarkImgSize['y']);
imagedestroy($pngWaterMarkImg);

$picture = ImageCreateTrueColor($arDestinationSize["width"], $arDestinationSize["height"]);

imagealphablending( $picture, false);

imagesavealpha( $picture, true);

$pngWaterMarkImg = @imagecreatefrompng($_SERVER["DOCUMENT_ROOT"] . $arWaterMark["path_to_watermark"]);

imagecopyresampled($picture, $pngWaterMarkImg, ($arPictureSize["x"] - $newwidth) / 2, ($arPictureSize["y"] - $newheight) / 2, 0, 0, $newwidth, $newheight, $arWaterMarkImgSize['x'], $arWaterMarkImgSize['y']);

imagedestroy($pngWaterMarkImg);

Причем на денвере все нормально работает, а на хостинге не хочет. Подскажите, может ли что-то зависеть от настроек сервера? Может версия пхп или gd? Спасибо.

Ответить ↓

Дмитрий Амиров Автор08.10.2015 в 01:13

Боюсь что я не знаю причин такого поведения. Да и впрочем уже не особо помню особенности работы с картинками в php. Поэтому боюсь вам прийдется самому искать причину проблемы(
PS: как решите — отпишитесь тут пожалуйста)

Ответить ↓

Сереня 14.09.2016 в 20:14

юзайте imagecreatefrompng !! и памяти в 2р меньше жрет!!! качество чуть ниже.. хз. для аватарок самое то!

Ответить ↓
Шум Каблионч 07.11.2016 в 00:36

А у меня в гифе, после этого преобразования остаётся только первый кадр.
Так и должно быть?

Ответить ↓
1. Дмитрий Амиров Автор07.11.2016 в 03:18
  
  Нет. Анимированные гифки должны обрабатываться немного иначе. Погуглите про ресайз анимированных гифок. Я с такой задачей не сталкивался, не смогу помочь.
  
  Ответить ↓
  1. Шум Каблионч 08.11.2016 в 00:15
    
    Всё равно спасибо. Много у вас взял.
    
    Ответить ↓
Михаил 14.12.2016 в 15:48

СПАСИБО!!! То, что надо))

Ответить ↓
Сергей 18.05.2017 в 18:05

Болшое спасибо! Ваша статья мне помогла.

Ответить ↓

IntSystem.org

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

Правильный ресайз прозрачных картинок на PHP

Ресайзим PNG

Ресайзим GIF

Вывод

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

Ресайзим PNG

Ресайзим GIF

Вывод

Смотрите также

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