Aug 17, 2024, 05:45 AM
Hello everyone,
Today, i would like to share with you a code snippet for uploading and converting WebP images to PNG. Additionally, it includes an option to add a watermark to the bottom right corner of the image, or not, and allows for image uploads from a URL.
The code is designed with security measures to protect against XSS attacks.
![[Image: 5fUqpXB.png]](https://i.imgur.com/5fUqpXB.png)
If you have any questions, please feel free to leave a comment below.
Wishing you success!
Today, i would like to share with you a code snippet for uploading and converting WebP images to PNG. Additionally, it includes an option to add a watermark to the bottom right corner of the image, or not, and allows for image uploads from a URL.
The code is designed with security measures to protect against XSS attacks.
PHP Code:
<?php
error_reporting(E_ALL & ~E_WARNING);
$uploadDir = 'uploads/';
$convertedDir = 'converted/';
$watermarkPath = 'logo.png';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0755, true);
}
if (!is_dir($convertedDir)) {
mkdir($convertedDir, 0755, true);
}
$messageDisplay = "";
function addWatermark($imagePath, $watermarkPath) {
$image = imagecreatefrompng($imagePath);
$watermark = imagecreatefrompng($watermarkPath);
$imageWidth = imagesx($image);
$imageHeight = imagesy($image);
$watermarkWidth = imagesx($watermark);
$watermarkHeight = imagesy($watermark);
$destX = $imageWidth - $watermarkWidth - 0;
$destY = $imageHeight - $watermarkHeight - 0;
imagecopy($image, $watermark, $destX, $destY, 0, 0, $watermarkWidth, $watermarkHeight);
imagepng($image, $imagePath);
imagedestroy($image);
imagedestroy($watermark);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['webp_files']) && !empty($_FILES['webp_files']['name'][0])) {
$fileCount = count($_FILES['webp_files']['name']);
$messages = [];
$applyWatermark = isset($_POST['watermark']) && $_POST['watermark'] === 'yes';
for ($i = 0; $i < $fileCount; $i++) {
$fileTmpName = $_FILES['webp_files']['tmp_name'][$i];
$fileName = basename($_FILES['webp_files']['name'][$i]);
$fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
if ($fileExt === 'webp') {
$uploadFile = $uploadDir . $fileName;
$convertedFile = $convertedDir . pathinfo($fileName, PATHINFO_FILENAME) . '.png';
if (move_uploaded_file($fileTmpName, $uploadFile)) {
$image = imagecreatefromwebp($uploadFile);
if ($image !== false) {
if (imagepng($image, $convertedFile)) {
if ($applyWatermark) {
addWatermark($convertedFile, $watermarkPath);
}
$messages[] = htmlspecialchars("Successfully converted: $fileName", ENT_QUOTES, 'UTF-8');
} else {
$messages[] = htmlspecialchars("Error converting: $fileName", ENT_QUOTES, 'UTF-8');
}
imagedestroy($image);
} else {
$messages[] = htmlspecialchars("Cannot open WebP file: $fileName", ENT_QUOTES, 'UTF-8');
}
unlink($uploadFile);
} else {
$messages[] = htmlspecialchars("Error uploading file: $fileName", ENT_QUOTES, 'UTF-8');
}
} else {
$messages[] = htmlspecialchars("File is not a WebP format: $fileName", ENT_QUOTES, 'UTF-8');
}
}
foreach ($messages as $message) {
$messageDisplay .= "<p class='message success'>$message</p>";
}
}
if (isset($_POST['url'])) {
$url = filter_var($_POST['url'], FILTER_VALIDATE_URL);
if ($url) {
$fileName = basename(parse_url($url, PHP_URL_PATH));
$uploadFile = $uploadDir . $fileName;
$convertedFile = $convertedDir . pathinfo($fileName, PATHINFO_FILENAME) . '.png';
if (file_put_contents($uploadFile, file_get_contents($url))) {
$image = imagecreatefromwebp($uploadFile);
if ($image !== false) {
if (imagepng($image, $convertedFile)) {
if (isset($_POST['watermark']) && $_POST['watermark'] === 'yes') {
addWatermark($convertedFile, $watermarkPath);
}
$messageDisplay .= "<p class='message success'>Successfully downloaded and converted from URL: $fileName</p>";
} else {
$messageDisplay .= "<p class='message error'>Error converting from URL: $fileName</p>";
}
imagedestroy($image);
} else {
$messageDisplay .= "<p class='message error'>Cannot open WebP file from URL: $fileName</p>";
}
unlink($uploadFile);
} else {
$messageDisplay .= "<p class='message error'>Error downloading file from URL: $fileName</p>";
}
} else {
$messageDisplay .= "<p class='message error'>Invalid URL.</p>";
}
}
if (isset($_POST['delete_all'])) {
$files = array_diff(scandir($convertedDir), array('.', '..'));
foreach ($files as $file) {
$filePath = $convertedDir . $file;
if (file_exists($filePath)) {
unlink($filePath);
}
}
$messageDisplay .= "<p class='message success'>All images have been deleted.</p>";
}
if (isset($_POST['download_all'])) {
$zip = new ZipArchive();
$zipFilename = 'converted_images.zip';
if ($zip->open($zipFilename, ZipArchive::CREATE) === TRUE) {
$files = array_diff(scandir($convertedDir), array('.', '..'));
foreach ($files as $file) {
$filePath = $convertedDir . $file;
if (file_exists($filePath)) {
$zip->addFile($filePath, $file);
}
}
$zip->close();
header('Content-Type: application/zip');
header('Content-Disposition: attachment; filename="' . $zipFilename . '"');
header('Content-Length: ' . filesize($zipFilename));
readfile($zipFilename);
unlink($zipFilename);
exit;
} else {
$messageDisplay .= "<p class='message error'>Unable to create zip file.</p>";
}
}
}
if (isset($_GET['delete'])) {
$fileToDelete = $convertedDir . basename($_GET['delete']);
if (file_exists($fileToDelete)) {
unlink($fileToDelete);
$messageDisplay .= "<p class='message success'>Deleted file: " . htmlspecialchars(basename($_GET['delete']), ENT_QUOTES, 'UTF-8') . "</p>";
} else {
$messageDisplay .= "<p class='message error'>File does not exist: " . htmlspecialchars(basename($_GET['delete']), ENT_QUOTES, 'UTF-8') . "</p>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload and Convert Images</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-sizing: border-box;
}
h1, h2 {
color: #444;
}
form {
margin-bottom: 20px;
}
input[type="file"],
input[type="text"] {
display: block;
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 5px;
border-radius: 5px;
background-color: #fff;
}
input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: #218838;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 15px;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
background-color: #fafafa;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
img {
max-width: 200px;
height: auto;
border: 1px solid #ddd;
border-radius: 5px;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.delete-all-button, .download-all-button {
background-color: #dc3545;
margin-top: 10px;
}
.delete-all-button:hover, .download-all-button:hover {
background-color: #c82333;
}
.message {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}
.message.success {
background-color: #d4edda;
color: #155724;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
position: relative;
}
.modal-content img {
max-width: 100%;
height: auto;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.download-button {
background-color: #007bff;
color: white;
padding: 5px 10px;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
}
.download-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Upload and Convert WebP Images</h1>
<form action="" method="post" enctype="multipart/form-data">
<label for="webp_files">Choose WebP files to upload:</label>
<input type="file" name="webp_files[]" id="webp_files" multiple>
<input type="checkbox" name="watermark" id="watermark" value="yes">
<label for="watermark">Add watermark to images</label>
<input type="submit" value="Upload and Convert">
</form>
<form action="" method="post">
<label for="url">Enter WebP image URL:</label>
<input type="text" name="url" id="url" placeholder="https://">
<input type="checkbox" name="watermark" id="watermark_url" value="yes">
<label for="watermark_url">Add watermark to image</label>
<input type="submit" value="Download and Convert from URL">
</form>
<?php if ($messageDisplay): ?>
<div class="message">
<?php echo $messageDisplay; ?>
</div>
<?php endif; ?>
<h2>Converted Images</h2>
<form action="" method="post">
<input type="submit" name="delete_all" value="Delete All Images" class="delete-all-button">
<input type="submit" name="download_all" value="Download All Images" class="download-all-button">
</form>
<ul>
<?php
$files = array_diff(scandir($convertedDir), array('.', '..'));
foreach ($files as $file): ?>
<li>
<img src="<?php echo $convertedDir . $file; ?>" alt="<?php echo htmlspecialchars($file, ENT_QUOTES, 'UTF-8'); ?>">
<a href="#view_image" class="view-btn" data-image="<?php echo $convertedDir . $file; ?>">View</a>
<a href="?delete=<?php echo urlencode($file); ?>" onclick="return confirm('Are you sure you want to delete this image?');">Delete</a>
<a href="<?php echo $convertedDir . $file; ?>" class="download-button" download>Download</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div id="view_image" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img id="modal_image" src="" alt="View Image">
</div>
</div>
<script>
var modal = document.getElementById("view_image");
var modalImage = document.getElementById("modal_image");
var viewButtons = document.querySelectorAll(".view-btn");
viewButtons.forEach(function(btn) {
btn.onclick = function(e) {
e.preventDefault();
var imageUrl = this.getAttribute("data-image");
modalImage.src = imageUrl;
modal.style.display = "block";
}
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
If you have any questions, please feel free to leave a comment below.
Wishing you success!