Как создать изображение водяного знака с помощью библиотеки PHP GD (часть 2)
Введение
Поскольку необходимость рисования графики вторгается в пространство веб-разработки. Изображения водяных знаков чаще всего требуются при разработке программного обеспечения. Теперь PHP упростил для людей возможность использовать стек для создания изображений водяных знаков, просто написав PHP-коды.
Итак, не теряя много времени, давайте сразу приступим к этому руководству.
Как создать изображение водяного знака в PHP с помощью PHP GD
Библиотека PHP GD имеет несколько замечательных функций, которые позволяют манипулировать изображениями. Изображения можно обрезать, изменять их размер, поворачивать, ставить водяные знаки и многое другое с помощью PHP GD.
В большинстве веб-приложений вам необходимо добавлять динамические изображения или добавлять водяные знаки к изображениям. В предыдущем уроке мы рассмотрели Как сгенерировать изображение: используя библиотеку PHP GD. Это руководство научит вас, как использовать PHP для добавления водяных знаков к фотографиям.
Мы можем использовать расширение GD в PHP, чтобы добавить водяной знак к изображениям, выполнив следующие действия:
- Откройте исходное изображение:
$img = imagecreatefromjpeg("IMAGE.JPG"); - Установите цвет текста:
$red = imagecolorallocatealpha($img, 255, 0, 0); - Добавьте к изображению текст:
imagettftext($img, 18, 0, 0, 24, $red, "PATH\FONT.TTF", "COPYRIGHT"); - Сохраните изображение с водяным знаком:
imagejpeg($img, "WATERMARKED.JPG", 60);
Примеры библиотеки GD на водяном знаке
Есть несколько вещей, которые вы можете использовать для создания GD Library, в этом уроке мы будем создавать изображения с водяными знаками! Ниже приведены примеры водяных знаков библиотеки GD.
Создайте изображение водяного знака, которое можно вывести в виде файла с библиотекой GD.
С PHP GD есть так много вещей, которые могут быть достигнуты с помощью библиотеки, поэтому GD является выдающейся стороной PHP.
Примеры некоторых вариантов использования библиотеки GD
- Для создания изображений
- Для создания изображений водяных знаков
- Для генерации капчи
Теперь мы создадим водяной знак, который будет выводиться в виде файла в нашей папке и браузере.
Во-первых, вы запускаете сеанс и перенаправляете нас на другую страницу, где мы будем просматривать изображение. Мы можем добиться этого с помощью расположения заголовка, тогда мы сможем визуально просматривать код.
<?php
session_start();
//here we are sending this our raw code to a new page
header("Location: other_file.php");
?>
Затем вы создаете переменную, которой будет присвоено изображение.
См. код ниже.
<?php
//hard code the image you want to watermark from the directory
$image1 = 'image/camera.jpg';
//hard code the watermark image from the directory
$image2 = 'image/potato.png';
?>
Затем вы присвоите значения списку переменных за одну операцию.
<?php
//assign values to a list of variables in one operation
list($width, $height) = getimagesize($image2);
?>
Назначьте метод imagecreatefromstring() переменной внутри файла imagecreatefromstring(). Вы будете использовать другую функцию для получения содержимого изображения.
В нашем случае мы будем использовать file_get_content() для получения имени изображения, в нашем случае мы присвоили его переменной $image, и файл получит содержимое, которое будет содержать переменную.
Функция Imagecreatefromstring() обеспечивает идентификацию изображения, которое соответствует изображению, созданному с использованием предоставленных данных.
Приведенный ниже код является типичным примером того, что объяснено выше.
<?php
$image1 = imagecreatefromstring(file_get_contents($image1));
$image2 = imagecreatefromstring(file_get_contents($image2));
?>
Теперь давайте скопируем и объединим части изображения. Что делает функция ниже, так это то, что она берет переменную изображения и переменную изображения водяного знака, а затем объединяет их с другими переменными и значениями, которые были указаны в кодах выше.
После сбора всех этих значений функция объединит их в одно, чтобы мы могли вызывать одну переменную в конце дня.
См. приведенные ниже коды.
<?php
//here we took a portion of a picture and combine it.
imagecopymerge($image1, $image2, 104, 160, 0, 0, $width, $height, 100);
?>
После прохождения процесса функции imagecopymerge() мы можем обрабатывать или делать с одной переменной. Теперь мы хотим, чтобы изображение отображалось в виде файла png. Поэтому он будет вставлен в функцию с именем imagepng().
Метод imagepng() преобразует изображение в файл png.
Примечание. Внутри функция будет содержать одну переменную изображения, которая подверглась процессу слияния копий.
<?php //Create a PNG file and output it to a file or the browser. imagepng($image1); ?>
Итак, давайте сохраним изображение в нашей папке (папке, где происходит кодирование). На этот раз вы будете использовать imagepng(), и он будет принимать два параметра: первый — это переменная, содержащая изображение, а второй — имя, которое вы хотите, чтобы изображение носило в вашей папке.
Затем мы присваиваем его переменной $image1 и вызываем $_SESSION['img'], а затем присваиваем его переменной, содержащей функцию imagepng().
<?php //if you want to save the merged image $image1 = imagepng($image1, 'merged.png'); $_SESSION['img'] = $image1; ?>
Вот структура приведенных выше кодов.
<?php
session_start();
//here we are sending this our raw code to a new page
header("Location: other_file.php");
//hard code the image you want to watermark from the directory
$image1 = 'image/camera.jpg';
//hard code the watermark image from the directory
$image2 = 'image/potato.png';
//assign values to a list of variables in one operation
list($width, $height) = getimagesize($image2);
//returns an image identifier representing the image obtained from a given data
$image1 = imagecreatefromstring(file_get_contents($image1));
$image2 = imagecreatefromstring(file_get_contents($image2));
//here we took a portion of a picture and combine it.
imagecopymerge($image1, $image2, 104, 160, 0, 0, $width, $height, 100);
//Create a PNG file and output it to a file or the browser.
imagepng($image1);
//if you want to save the merged image
$image1 = imagepng($image1, 'merged.png');
$_SESSION['img'] = $image1;
?>
Затем на странице, на которую мы перенаправляемся, называется other_file.php, и на этой странице он будет содержать тег изображения, который будет вызывать изображение из нашего каталога файлов.
Просто напишите имя сгенерированного изображения в src="" над страницей, которую вы создадите в теге <?php ?>.
См. код ниже
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Final</title>
</head>
<body>
<img src="merged.png">
</body>
</html>
Теперь посмотрите, где находится ваш сохраненный файл изображения.
Сохраните страницу, перейдите в браузер и обновите страницу. Ниже приведен вывод из браузера, вывод также будет сгенерирован в каталоге файлов.
Как сгенерировать изображение и изображение водяного знака с помощью PHP GD
Вот как вы добавляете водяной знак на изображение. С помощью этой стратегии вы можете развить свои технические навыки в том смысле, что изображения в вашей работе будет трудно украсть, потому что на них есть водяной знак.
Таким образом, концепция водяного знака заключается в том, что это один из самых отличных методов предотвращения кражи или повторного использования изображения другим человеком.
Используя водяной знак, вы можете сделать владельца фотографии видимым. Водяной знак облегчает определение того, кто сделал фотографию или изображение. В изображениях, защищенных авторским правом, обычно используется водяной знак.
Изображения обычно содержат водяной знак, который включает имя создателя или корпоративный логотип. Теперь, чтобы создать изображение водяного знака, мы будем использовать очень динамичную концепцию. Во-первых, у нас будет индексная страница.
Страница, на которую вы поместили изображение водяного знака, и изображение, на которое вы хотите поставить водяной знак. index.php будет выглядеть очень просто с приведенным ниже кодом.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>GD</title>
</head>
<body>
<div>
<form class="form" action="watermark_action.php" method="post" enctype="multipart/form-data">
<p>Select An Image File to Upload:</p>
<input class="files" type="file" name="i_file">
<p>Select Your Choice of watermark Image File to Upload:</p>
<input class="files" type="file" name="w_file">
<input type="submit" class="btn" name="submit" value="Upload">
</form>
</div>
</body>
</html>
Вот CSS приведенного выше кода, создайте файл style.css и напишите в нем следующий код.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
text-align: center;
}
div.form{
display: block;
}
form{
margin-top: 40px;
display: inline-block;
margin-right: auto;
margin-left: auto;
padding: 30px;
background-color: ;
box-shadow: 5px 5px 10px 10px lightgray;
}
p{
font-size: 18px;
color: black;
}
input{
padding: 10px;
margin: 5px;
}
.files{
padding: 10px;
margin: 5px;
}
.btn{
padding: 10px;
width: 100%;
border: 0;
border-radius: 20px;
}
.btns{
padding: 10px;
width: 20%;
margin: 5px;
background-color: red;
border: 0;
color: white;
text-decoration: none;
border-radius: 20px;
position: absolute;
right: 0;
bottom: 0;
}
.btn:hover{
background-color: black;
color: white;
transform: scale(0.9);
transition: 2s;
}
После этого процесса у вас будет стилизованная форма, подобная этой.
Теперь с приведенными выше кодами вы сможете заполнить выбранное вами изображение и выбранный вами водяной знак.
Далее вы создадите еще один файл и назовете его атрибутом действия формы, которую мы только что создали. Создайте файл и дайте ему имя вашего атрибута действия в нашем случае watermark_action.php.
Итак, вы откроете файл и вставите код ниже. Я кратко объясню, что я сделал в коде.
Во-первых, вам нужно создать папку с именем image, вы можете назвать ее как угодно. Эта папка с изображениями будет содержать изображение, на которое вы хотите нанести водяной знак, вы сначала сохраните его в папке, прежде чем вызывать его в другом файле.
Затем на странице «Действие» вы создадите сеанс, чтобы мы могли хранить информацию (в переменных) для использования на нескольких страницах.
Теперь вы создадите переменную, которая будет проверять, есть ли в вашем коде ошибка. Ниже приведен код, который позволяет вам выполнить некоторую обработку ошибок.
<?php
//declare an error variable and an error_msg variable
//the variables enable you to assign your errors to the variable.
$error = 0;
$error_msg = "";
?>
По мере продвижения вы увидите использование переменной ошибки.
Следующее, что нужно сделать, это создать функцию, причина этой функции в том, чтобы сделать возможным вызов условных операторов, написанных внутри функции, сразу, вместо того, чтобы вызывать все случай переключения один за другим.
Функция ниже принимает два параметра, первый параметр — преобразовать строку имени изображения в нижний регистр с помощью метода strtolower() и сохранить ее обратно в переменной $ext.
Код ниже объясняет это более подробно.
<?php
//create a function that accepts two parameters
function make_image($ext, $src){
$ext = strtolower($ext);
//Load the stamp and the photo to apply the watermark to
switch ($ext) {
case 'jpg':
return $result = imagecreatefromjpeg($src);
break;
case 'jpeg':
return $result = imagecreatefromjpeg($src);
break;
case 'png':
return $result = imagecreatefrompng($src);
default:
return $result = imagecreatefromjpeg($src);
break;
}
?>
Обратите внимание, что значение по умолчанию для случая переключения необходимо, если все условия в случае не выполнены, будет выполнено значение по умолчанию.
Следующим шагом является создание папки, в которой будут находиться выбранные изображения. После создания она будет отображаться в вашем редакторе кода. Вы можете назвать его как хотите, но я назвал свой images и присвоил их переменной.
Сохраните имена двух входных тегов в глобальной переменной $_FILES и вставьте их в переменную, чтобы их можно было легко вызывать.
Мы использовали оператор if, чтобы проверить, является ли изображение или изображение водяного знака пустым.
Код ниже объясняет это больше.
<?php
//you will write the name of the image folder and assign it to a variable
$targetDir = "images/";
//save the name of the files in a variable image, watermark
$image = $_FILES['i_file'];
$watermark = $_FILES['w_file'];
//checks if the image and watermark are empty
if ($image['error'] != 0 || $watermark['error'] !=0) {
$error = 1;
$error_msg.="error uploading image <br>";
}
?>
Вы смогли проверить, пусто ли изображение. если он пустой? он выдаст ошибку с надписью «Ошибка загрузки изображения».
Теперь мы изменим имя наших изображений на случайное число при отправке. все, что вам нужно сделать, это вызвать переменную и сохранить целевой каталог, также известный как targetDir, внутри новой переменной.
Метод pathinfo() получит имя файла и получит только последнее расширение, если путь имеет более одного расширения.
Не торопитесь и изучите приведенный ниже код, чтобы лучше понять то, что было объяснено ранее.
<?php
$realimage = $image['tmp_name'];
$realwatermark = $watermark['tmp_name'];
// File upload path
$imagepath = $targetDir . sha1(microtime()) . $image['name'];
$watermarkpath = $targetDir . sha1(microtime()) . $watermark['name'];
//if the route contains more than one extension, it just returns the most recent extension.
$image_ext = pathinfo($image['name'],PATHINFO_EXTENSION);
$watermark_ext = pathinfo($watermark['name'], PATHINFO_EXTENSION);
?>
Мы смогли работать как с изображением водяного знака, так и с основным изображением.
Теперь, поработав над каталогом изображения, нам нужно перечислить, какой тип расширения изображения разрешен в нашем проекте, включая размер шрифта расширений.
Итак, ниже мы перечислим типы необходимых нам расширений и выполним некоторые операторы if, первый оператор if содержит встроенную функцию in_array().
Что делает in_array(), так это то, что он **** ищет конкретное значение в массиве. Таким образом, in_array() проверит, является ли указанный тип файла допустимым или нет.
И второй оператор if, когда условия будут выполнены, вы переместите загруженный файл на его путь.
<?php
//an array of image extensions saved in a variable $allowedType
$allowedType = array('jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG');
//Get the array extension and the type that is allowed
if (in_array($image_ext, $allowedType)) {
if (in_array($watermark_ext, $allowedType)) {
//move the file you want to upload, to their various paths or destination
move_uploaded_file($realwatermark, $watermarkpath);
move_uploaded_file($realimage, $imagepath);
//calling the above function and saving it inside their various variable
$p_image = make_image($image_ext, $imagepath);
$p_watermark = make_image($watermark_ext, $watermarkpath);
}else{
//if the watermark type is not in the array, it will throw 1 error
$error = 1;
$error_msg.="Invalid watermark Type";
}
}else{
//if the watermark type is not in the array, it will throw 1 error
$error = 1;
$error_msg.="Invalid image Type";
}
?>
мы почти округляем. Тип набора изображений претерпел несколько условий.
Просто прочитайте комментарии к коду ниже, и вы получите более четкое представление о каждой строке кода. Ниже мы устанавливаем поле внизу или поле справа от изображения с водяным знаком.
И мы также получаем высоту и вес водяного знака. работал над позиционированием и сохранил изображение в нашей папке изображений и переменной $_SESSION.
Сразу же мы делаем перенаправление с нашим местоположением header(), и оно приведет нас к другому интерфейсу с именем watermark.php.
Вот код, который выполняет то, что было сказано ранее.
<?php
//Set the margins for the watermark
$marge_right = 10;
$marge_bottom = 10;
//Get the height/width of the watermark image
$sx = imagesx($p_watermark);
$sy = imagesy($p_watermark);
// Copy the watermark image onto our photo using the margin offsets and
// the photo width to calculate the positioning of the watermark.
imagecopy($p_image, $p_watermark, imagesx($p_image) - $sx - $marge_right, imagesy($p_image) - $sy - $marge_bottom, 0, 0, imagesx($p_watermark), imagesy($p_watermark));
//Save the image
imagepng($p_image, $imagepath);
imagedestroy($p_image);
//Save the $imagepath in the SESSION variable
$_SESSION['img'] = $imagepath;
//will take you to the page where you will see the image you watermarked.
header("Location: watermark.php");
?>
Мы закончили с объяснением приведенного выше кода.
Вот все, что описано выше. вы можете внимательно посмотреть на него, чтобы увидеть, есть ли что-то не так.
<?php
// Path configuration Page
session_start();
//declare an error variable and an error_msg variable
//the variables enable you to assign your errors to the variable.
$error = 0;
$error_msg = "";
//create a function that accepts two parameters
function make_image($ext, $src){
//Load the stamp and the photo to apply the watermark to
$ext = strtolower($ext);
switch ($ext) {
case 'jpg':
return $result = imagecreatefromjpeg($src);
break;
case 'jpeg':
return $result = imagecreatefromjpeg($src);
break;
case 'png':
return $result = imagecreatefrompng($src);
default:
return $result = imagecreatefromjpeg($src);
break;
}
}
//you will write the name of the image folder and assign it to a variable
$targetDir = "image/";
//save the name of the files in a variable image, watermark
$image = $_FILES['i_file'];
$watermark = $_FILES['w_file'];
//checks if the image and watermark are empty
if ($image['error'] != 0 || $watermark['error'] !=0) {
$error = 1;
$error_msg.="error uploading image <br>";
}
$realimage = $image['tmp_name'];
$realwatermark = $watermark['tmp_name'];
// File upload path
$imagepath = $targetDir . sha1(microtime()) . $image['name'];
$watermarkpath = $targetDir . sha1(microtime()) . $watermark['name'];
$image_ext = pathinfo($image['name'],PATHINFO_EXTENSION);
$watermark_ext = pathinfo($watermark['name'], PATHINFO_EXTENSION);
//an array of image extensions saved in a variable $allowedType
$allowedType = array('jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG');
if (in_array($image_ext, $allowedType)) {
//Get the array extension and the type that is allowed
if (in_array($watermark_ext, $allowedType)) {
//move the file you want to upload, to their various paths or destination
move_uploaded_file($realwatermark, $watermarkpath);
move_uploaded_file($realimage, $imagepath);
//calling the above function and saving it inside their various variable
$p_image = make_image($image_ext, $imagepath);
$p_watermark = make_image($watermark_ext, $watermarkpath);
}else{
//if the watermark type is not in the array, it will throw 1 error
$error = 1;
$error_msg.="Invalid watermark Type";
}
}else{
//if the watermark type is not in the array, it will throw 1 error
$error = 1;
$error_msg.="Invalid image Type";
}
//Set the margins for the watermark
$marge_right = 10;
$marge_bottom = 10;
//Get the height/width of the watermark image
$sx = imagesx($p_watermark);
$sy = imagesy($p_watermark);
//Copy the watermark image onto our photo using the margin offsets and
//the photo width to calculate the positioning of the watermark.
imagecopy($p_image, $p_watermark, imagesx($p_image) - $sx - $marge_right, imagesy($p_image) - $sy - $marge_bottom, 0, 0, imagesx($p_watermark), imagesy($p_watermark));
//Save the image
imagepng($p_image, $imagepath);
imagedestroy($p_image);
//Save the $imagepath in the SESSION variable
$_SESSION['img'] = $imagepath;
//will take you to the page where you will see the image you watermarked
header("Location: watermark.php");
?>
После всего этого нам нужно вывести его в другом файле с именем watermark.php.
На этой странице вы напишете несколько строк кода PHP. сначала вы начнете сеанс, потому что все, что мы сделали на странице действий, было сохранено в сеансе, поэтому при выборе этого вам нужно начать сеанс. После запуска сеанса вы вызовете переменную, в которой изображение было сохранено на странице действий.
Затем, последнее, что нужно сделать, это создать тег изображения, в src тега <img src=""> вы будете использовать короткий тег PHP для отображения переменной, которой назначен сеанс. написав этот код, вы теперь можете наглядно увидеть свой вывод.
<?php
session_start();
$imagepath = $_SESSION['img'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" name="viewport" content="width=device-width, text/html initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <meta content="; charset=UTF-8"> -->
<title>GD</title>
</head>
<body>
<h1>Your Result</h1>
<img src="<?=$imagepath ?>">
<a href="index.php" class="btns">Go back to for more Watermarking</a>
</body>
</html>
Заключение
Мы подошли к концу этого урока, надеюсь, вы извлечете из него массу пользы.
Изучение того, как создать изображение водяного знака и текст, используя библиотеку PHP GD.
Это не конец туториала, мы поговорим подробнее о том, что вы можете делать с помощью GD Library.
До следующего раза, наслаждайтесь!
Об авторе
Эммануэль Околи начал свой путь в качестве инженера-программиста в 2020 году. За эти годы он приобрел полноценные навыки в JavaScript, PHP, HTML и CSS и многом другом.
В настоящее время он работает фрилансером, создает веб-сайты для клиентов и пишет технические руководства, обучая других тому, что делает он.
Эммануэль Околи открыт и доступен для вас. Вы можете связаться с ним через Linked In, Facebook, Github, Twitter, или на его веб-сайте.
