Сейчас: 09:21:29   29-го марта 2024 г.
UsefulScript.ruСкриптыГрафикаКартинка с неровными краями
6
13

Создаем картинку с неровными краями
и прозрачным фоном по маске

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


Для нормальной работы данного скрипта необходима поддержка хостингом библиотеки php_gd2.dll. Данная библиотека должна быть раскомментирована в файле php.ini на стороне сервера!


Наглядный пример работы предлагаемого нами скрипта расположен ниже:


Имеется исходное изображение: Исходное изображение для наложения маски

Также была подготовлена маска: Маска для наложения на изображение

В результате работы скрипта получаем следующий результат: Результат работы скрипта наложения маски

Для начала Вам необходимо будет создать файл, содержащий скрипт, который будет проделывать всю необходимую работу по наложению маски на изображение. Для этого создайте файл (например, mask_to_img.php) и поместите в него следующий код:

PHP код:
<?php
$image 
array_pop(explode("."$_GET["img"]));
if (
$image=="png"$image imagecreatefrompng($_GET["img"]);
elseif (
$image=="jpg"$image imagecreatefromjpeg($_GET["img"]);
else { echo 
"Неверный формат изображения"; exit; }

$mask array_pop(explode("."$_GET["msk"]));
if (
$mask=="png"$mask imagecreatefrompng($_GET["msk"]);
elseif (
$mask=="jpg"$mask imagecreatefromjpeg($_GET["msk"]);
else { echo 
"Неверный формат маски"; exit; }

$result imagecreatetruecolor(imagesx($image), imagesy($image));

mask_image($result$image$mask);

header("Content-type: image/jpeg");
imagepng($result);

function 
mask_image($result$pic$mask){
 
$width imagesx($pic);
 
$height imagesy($pic);

 
$id_color imagecolorallocate($result000);
 
imagecolortransparent($result$id_color);

 for(
$i=0$i<$width$i++){
     for(
$j=0$j<$height$j++){
         
$colorat imagecolorat($pic$i$j);
         
$color imagecolorsforindex($pic$colorat);

         
$colorat imagecolorat($mask$i$j);
         
$mcolor imagecolorsforindex($mask$colorat);

         if (!(
$mcolor["red"]==255 && $mcolor["green"]==255 && $mcolor["blue"]==255)){
             
$colorat imagecolorallocate($result$color["red"], 
                 
$color["green"], $color["blue"]);
             
imagesetpixel($result$i$j$colorat);
         }
     }
 }
}
?>

В том месте Вашей страничке, где необходимо вывести изображение с уже наложенной на него маской, используйте следующий код:

HTML код:
<img src="mask_to_img.php?img=pictures/screen.jpg&msk=pictures/cover.png" alt="">

Где в качестве $_GET переменных выступают путь к изображению (img=pictures/screen.jpg) и путь к маске (msk=pictures/cover.png). Исходные формат файлов изображения и маски может быть как PNG так и JPG.

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


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


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

Дата создания: 19:41:27 04.11.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 7926 раз(а).

Комментарии посетителей (2 шт.):
Денис
1
# 68
(13:15:55  02.02.2012 г.)

Ели взять черную маску и наложить саму на себя, то ничего не будет видно, кроме полупрозрачных областей, если взять маску цветную и наложить саму на себя, то все будет работать нормально.
Ответить

Kir
1
# 3689
(10:57:13  24.01.2017 г.)

А как сделать, что бы края у картинки после наложения маски были "затухающие" (как при градиенте)?
Ответить

Закрыть
Ваше имя:
977 + 10 =
Добавить комментарий:
Ваше имя:
977 + 10 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 8

Мешает ли Вам реклама?