Laravel image processing: Use native PHP to realize co-existence storage of original images and WebP format

This tutorial details how to save both the original uploaded image and its WebP converted version in a Laravel project. The article points out the challenges that the Intervention Image library may encounter on specific save path issues, and provides a solution based on the native PHP GD library. After saving the original image, use functions such as imagecreatefromstring and imagewebp to perform efficient WebP format conversion and storage to ensure image resource optimization while retaining the original file and providing clear code examples and precautions.

introduction

In modern web development, image optimization is a key part of improving website performance and user experience. As an efficient image format, WebP is increasingly favored by developers for its excellent compression rate and visual quality. In Laravel projects, we often need to save the original images uploaded by users at the same time for other processing or backup in the future, and at the same time generate a WebP version for front-end display. This tutorial will detail how to achieve this in Laravel, specifically using the native PHP GD library to provide a robust alternative when encountering path writing issues using third-party libraries such as Intervention Image.

Laravel image storage basics

Laravel provides a powerful file storage abstraction layer, and can easily interact with local file systems, S3 and other storage drivers through the Storage facade. Usually, we store the uploaded file in the storage/app/public directory and soft-link it to the public directory through the php artisan storage:link command to make it accessible through the URL.

However, when it comes to image format conversion and trying to save the converted image to a specific path, sometimes you encounter permission or path resolution errors such as Can't write image data to path (...). This is usually due to an inconsistency between the library and Laravel's storage system when resolving relative paths, or the target path does not have the correct write permissions.

The challenge of saving original images and WebP format at the same time

When using a popular image processing library like Intervention Image, although it provides convenient encode() and save() methods, you may encounter write failure problems when trying to save the converted image to a relative path such as public/images/. This may be because the save() method defaults to resolving paths relative to the application's root directory rather than the web server's document root (public directory), or it may not properly handle paths managed by Laravel's Storage facade.

In order to avoid this type of problem and provide a more direct and controllable solution, we can use PHP's built-in GD library function to complete the conversion and saving of WebP.

Solution: Utilize native PHP GD library for WebP conversion

The native PHP GD library provides a series of functions to process images, including loading images from different formats, converting them, and saving them to WebP format. This method bypasses possible path resolution problems with third-party libraries and directly operates the file system.

Step 1: Save the original image

First, we need to save the original image uploaded by the user to the server. This can be done through Laravel's Storage facade or directly using the move method. To facilitate subsequent processing, it is recommended to save the original image in an accessible path, such as a subdirectory under the public directory.

 use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str; // For unique file names

class ImageController extends Controller
{
    public function storeImage(Request $request)
    {
        // Verify file upload $request->validate([
            'fileName' => 'required|image|mimes:jpeg,jpg,png|max:2048', // Allowed image types and sizes]);

        $uploadedFile = $request->file('fileName');
        $originalExtension = $uploadedFile->getClientOriginalExtension();
        $originalFileName = Str::random(40) . '.' . $originalExtension; // Generate a unique file name $relativePath = 'images/uploads/' . date('Y/m'); // Store the relative path of the original image $fullPath = public_path($relativePath); // Full public path // Make sure the target directory exists if (!file_exists($fullPath)) {
            mkdir($fullPath, 0755, true);
        }

        // Save the original image if (!$uploadedFile->move($fullPath, $originalFileName)) {
            return response()->json(['message' => 'Failed to save original image.'], 500);
        }

        $originalImagePath = $relativePath . '/' . $originalFileName; // The path stored in the database // ... You can save $originalImagePath to the database later // $imageModel = new Image();
        // $imageModel->path = $originalImagePath;
        // $imageModel->save();

        // Continue with WebP conversion return $this->convertToWebP($fullPath . '/' . $originalFileName, $relativePath, $originalFileName);
    }

    /**
     *Convert images to WebP format and save*
     * @param string $sourceImagePath The complete file path of the original image * @param string $targetRelativePath The relative path of WebP image storage (excluding file name)
     * @param string $originalFileName The file name of the original image (used to generate WebP file names)
     * @param int $quality WebP image quality (0-100)
     * @return \Illuminate\Http\JsonResponse
     */
    private function convertToWebP(string $sourceImagePath, string $targetRelativePath, string $originalFileName, int $quality = 80)
    {
        //Create image resources from file contents $imageContent = file_get_contents($sourceImagePath);
        if ($imageContent === false) {
            return response()->json(['message' => 'Failed to read original image for WebP conversion.'], 500);
        }

        $im = imagecreatefromstring($imageContent);

        if ($im === false) {
            return response()->json(['message' => 'Failed to create image resource from string.'], 500);
        }

        // Convert to true color image (required for some operations and format conversions)
        imagepalettetotruecolor($im);

        // Generate WebP file name and replace the original extension $webpFileName = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $originalFileName);
        $webpFullPath = public_path($targetRelativePath . '/' . $webpFileName);

        // Make sure the WebP target directory exists if (!file_exists(dirname($webpFullPath))) {
            mkdir(dirname($webpFullPath), 0755, true);
        }

        // Save as WebP format if (!imagewebp($im, $webpFullPath, $quality)) {
            imagedestroy($im); // Release memory return response()->json(['message' => 'Failed to save WebP image.'], 500);
        }

        imagedestroy($im); // Release memory $webpImagePath = $targetRelativePath . '/' . $webpFileName; // Store the WebP path to the database return response()->json([
            'message' => 'Images saved successfully.',
            'original_path' => $sourceImagePath,
            'webp_path' => $webpImagePath
        ], 200);
    }
}

Step 2: Convert and store WebP images

After the original image is successfully saved, we can use the functions of the GD library to process it:

1. Load images: Use file_get_contents() to read the original image content, and then use imagecreatefromstring() to load it as a GD image resource.
2. Convert to true color: Call imagepalettetotruecolor(). This is very important to ensure that the imagewebp() function works correctly, especially for indexed color images.
3. Define the WebP path: Generate a new file name, usually by replacing the original file's extension with .webp.
4. Save WebP: Use imagewebp($im, $new_webp_path, $quality) to save image resources as WebP files. The $quality parameter (0-100) allows you to control WebP's compression quality.
5. Release memory: After completing processing, use imagedestroy($im) to release the memory occupied by image resources.

Complete code example

Here is an example that combines the above two steps into a Laravel controller method.

 <?php namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Illuminate\Support\Str;

class MediaController extends Controller
{
    /**
     * Process image uploads, save original images and convert them to WebP format.
     *
     * @param Request $request
     * @return \Illuminate\Http\JsonResponse
     */
    public function uploadAndConvertImage(Request $request)
    {
        // 1. Verify file upload $request->validate([
            'image_file' =&gt; 'required|image|mimes:jpeg,jpg,png|max:5120', // Maximum 5MB
        ]);

        $uploadedFile = $request-&gt;file('image_file');
        $originalExtension = $uploadedFile-&gt;getClientOriginalExtension();
        $baseFileName = Str::random(20); // Generate a base file name without extension // Define the storage path (relative to the public directory)
        $storageRelativeDir = 'uploads/' . date('Y/m/d');
        $storageFullPath = public_path($storageRelativeDir);

        // Make sure the target directory exists if (!file_exists($storageFullPath)) {
            mkdir($storageFullPath, 0755, true);
        }

        // 2. Save the original image $originalFileName = $baseFileName . '.' . $originalExtension;
        $originalFileSavePath = $storageFullPath . '/' . $originalFileName; // Original image complete file path $originalWebPath = $storageRelativeDir . '/' . $originalFileName; // Web path for database or front end if (!$uploadedFile-&gt;move($storageFullPath, $originalFileName)) {
            return response()-&gt;json(['message' =&gt; 'Failed to save original image.'], 500);
        }

        // 3. Convert and save WebP images $webpFileName = $baseFileName . '.webp';
        $webpFileSavePath = $storageFullPath . '/' . $webpFileName; // WebP image full file path $webpWebPath = $storageRelativeDir . '/' . $webpFileName; // Web path for database or front end $webpQuality = 80; // WebP quality (0-100)

        //Create GD image resource from original image $im = null;
        switch (strtolower($originalExtension)) {
            case 'jpeg':
            case 'jpg':
                $im = imagecreatefromjpeg($originalFileSavePath);
                break;
            case 'png':
                $im = imagecreatefrompng($originalFileSavePath);
                // For PNG, transparency needs to be preserved imagealphblending($im, false);
                imagesavealpha($im, true);
                break;
            // Other formats can be added as needed default:
                return response()-&gt;json(['message' =&gt; 'Unsupported original image format for WebP conversion.'], 422);
        }

        if ($im === false) {
            return response()-&gt;json(['message' =&gt; 'Failed to create image resource from original file.'], 500);
        }

        // Convert to true color imageimagepalettetotruecolor($im);

        // Save as WebP format if (!imagewebp($im, $webpFileSavePath, $webpQuality)) {
            imagedestroy($im);
            return response()-&gt;json(['message' =&gt; 'Failed to save WebP image.'], 500);
        }

        imagedestroy($im); // Release memory // 4. Return a successful response, including the image path return response()-&gt;json([
            'message' =&gt; 'Images uploaded and converted successfully.',
            'original_image_url' =&gt; asset($originalWebPath),
            'webp_image_url' =&gt; asset($webpWebPath),
            'original_db_path' =&gt; $originalWebPath, // Can be used for database storage 'webp_db_path' =&gt; $webpWebPath, // Can be used for database storage], 200);
    }
}

Code explanation:

• File verification: Use $request->validate() to ensure that the uploaded image file is a valid image file.
• File name generation: Use Str::random() to generate a unique base file name to prevent file conflicts.
• Path management: The public_path() function is used to obtain the absolute path of the application's public directory to ensure that the file is saved to a location accessible to the web server. The asset() helper function is used to generate a URL that can be accessed by the front end.
• Directory creation: mkdir($storageFullPath, 0755, true) ensures that the target directory exists, and the true parameter indicates recursive creation.
• Original image saving: The $uploadedFile->move() method moves the uploaded file to the specified path.
• Image resource creation: Use functions such as imagecreatefromjpeg() or imagecreatefrompng() to load images according to the extension of the original file. For PNG, transparency is additionally handled.
• True color conversion: imagepalettetotruecolor() is a critical step to ensure that the image data is compatible with imagewebp().
• WebP saving: The imagewebp() function is responsible for saving image resources to WebP format and allows specifying quality.
• Memory release: imagedestroy($im) releases the memory occupied by GD image resources after processing is completed. This is a good practice.
• Response: Returns a JSON response containing the original image and the WebP image URL.

Things to note and best practices

1. Path management:
   • public_path() vs storage_path(): If the image needs to be accessed directly through the URL, please use public_path(). If the image is for backend processing only or requires tighter access control, storage_path() should be used (usually storage/app) and access provided through Laravel's route or controller.
   • Relative path and absolute path: It is recommended that the path stored in the database be relative to the public or storage directory, which makes it easier to migrate when the deployment environment changes.
2. Error handling:
   • Each step of file upload, directory creation, image resource creation, and WebP saving should have complete error checking and handling mechanisms, such as try-catch blocks or conditional judgments.
3. WebP quality settings:
   • The third parameter of imagewebp() is the quality (0-100). Higher values ​​mean better quality and larger file sizes. Balance quality and file size based on your needs. For most web uses, 70-85 is a good range.
4. File naming strategy:
   • Always generate unique filenames for uploaded files (for example, using Str::random() or uniqid() combined with timestamps) to avoid file overwrites and security issues.
   • Original images and WebP images can use the same base file name, with only different extensions, for easier management.
5. Asynchronous processing:
   • For large files or high-concurrency image upload scenarios, image conversion and saving operations may be time-consuming. Consider putting these operations into Laravel queues (Queues) for asynchronous execution to avoid blocking HTTP requests and improve user experience.
6. GD library extension:
   • Make sure your PHP environment has the GD library and its WebP support installed and enabled. You can check whether the gd module and WebP Support are enabled via phpinfo().
7. Database integration:
   • In the database, you can store the original path and the WebP path for each image, or store a base path and then dynamically generate the full path as needed.

Summarize

Through the native PHP GD library method introduced in this tutorial, you can effectively solve the path writing problems you may encounter when saving both the original image and the WebP converted version in a Laravel project. This approach provides a higher degree of control and does not rely on specific third-party libraries, making the image processing process more stable and predictable. Combined with Laravel's file storage and verification mechanism, you can build an efficient and robust image upload and optimization system.

The above is the detailed content of Laravel image processing: Use native PHP to realize co-existence storage of original images and WebP format. For more information, please follow other related articles on the PHP Chinese website!