Use imageflip() to achieve virtual fitting mirror effect

M66 2025-05-31

In modern e-commerce websites, virtual fitting mirror features are becoming increasingly popular. It not only brings users a more immersive shopping experience, but also improves conversion rates. This article will introduce how to use the imageflip() function in PHP to achieve a simple virtual fitting mirror effect, mainly through the image flip function to simulate the left and right mirror dressing effect.

1. Understand imageflip()

PHP has introduced the imageflip() function since 5.5.0, which is used to flip images. The syntax is as follows:

 bool imageflip(GdImage $image, int $mode)

The $mode parameter can be one of the following three constants:

IMG_FLIP_HORIZONTAL : horizontal flip (left and left and right mirror)
IMG_FLIP_VERTICAL : vertical flip (up and down mirror)
IMG_FLIP_BOTH : Perform horizontal and vertical flips simultaneously

In the scene of virtual fitting mirrors, the most commonly used is horizontal flip.

2. The core idea of simulated fitting effect

The user uploads a frontal photo of himself;
Users choose a piece of clothing (PNG with transparent background);
Overlay the clothing layer onto the user's photo;
Use imageflip() to allow users to click on buttons to view the effect of "in-mirror";
The processed image is finally output.

3. Sample code implementation

Here is a simple implementation example:

 <?php
// Load user photos
$userImage = imagecreatefromjpeg('uploads/user.jpg');

// Load clothesPNG（With transparent background）
$clothesImage = imagecreatefrompng('assets/clothes/shirt1.png');

// Get the width and height of the clothing layer
$clothesWidth = imagesx($clothesImage);
$clothesHeight = imagesy($clothesImage);

// Set the position of clothes on the user map（Here is assumed to be placed in the middle）
$destX = (imagesx($userImage) - $clothesWidth) / 2;
$destY = 200; // Distance to the top 200px，Can be adjusted as needed

// Allow transparent processing
imagealphablending($userImage, true);
imagesavealpha($userImage, true);

// Merge images
imagecopy($userImage, $clothesImage, $destX, $destY, 0, 0, $clothesWidth, $clothesHeight);

// If the user requests mirror mode
if (isset($_GET['mirror']) && $_GET['mirror'] == '1') {
    imageflip($userImage, IMG_FLIP_HORIZONTAL);
}

// Output image to browser
header('Content-Type: image/png');
imagepng($userImage);
imagedestroy($userImage);
imagedestroy($clothesImage);
?>

4. Front-end page example

The following is a simple version of the front-end page that matches the above PHP:

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Virtual fitting mirror</title>
</head>
<body>
    <h2>Virtual fitting mirror</h2>
    <img src="http://m66.net/tryon.php" id="preview" style="max-width: 100%;"><br><br>
    <button onclick="mirror()">Mirror switch</button>

    <script>
        let mirrored = false;
        function mirror() {
            mirrored = !mirrored;
            let img = document.getElementById('preview');
            img.src = 'http://m66.net/tryon.php?mirror=' + (mirrored ? '1' : '0') + '&t=' + new Date().getTime();
        }
    </script>
</body>
</html>

5. Summary

Through PHP's imageflip() function combined with simple image synthesis function, we can easily implement a basic virtual fitting mirror effect. Although this example is relatively simplified, it has laid the foundation for implementing a more advanced virtual dress-up system. You can further add images, face recognition positioning, 3D modeling and other technologies to enhance the sense of reality.

I hope this article will be helpful to you, so try it out!

imageflip