Tutorial 2x Convert WebP to PNG with Watermarking in Bulk - Chuyển đổi WebP sang PNG hàng loạt với Watermarking cho XenForo 2

PVS · Lúc 14:16:22

Convert WebP to PNG with Watermarking in Bulk - Chuyển đổi WebP sang PNG hàng loạt với Watermarking cho XenForo 2

Bài viết này chia sẻ với các bạn một đoạn code để tải lên và chuyển đổi hình ảnh WebP sang PNG. Ngoài ra, nó còn bao gồm tùy chọn thêm hình mờ vào góc dưới bên phải của hình ảnh hoặc không, và cho phép tải lên hình ảnh từ URL.

Code được thiết kế với các biện pháp bảo mật để bảo vệ chống lại các cuộc tấn công XSS.

PHP:

<?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">&times;</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>

Chúc các bạn thành công.

Nguồn: xenforo.com

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Tutorial 2x Convert WebP to PNG with Watermarking in Bulk - Chuyển đổi WebP sang PNG hàng loạt với Watermarking cho XenForo 2

PVS

Super Moderator

Chủ đề tương tự

Dịch vụ XenForo của VNXF

Hướng dẫn sử dụng

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ