Utilisez ImageFlip () pour réaliser un effet miroir d'ajustement virtuel

M66 2025-05-31

Dans les sites Web de commerce électronique modernes, les fonctionnalités de miroir d'ajustement virtuel deviennent de plus en plus populaires. Il apporte non seulement aux utilisateurs une expérience d'achat plus immersive, mais améliore également les taux de conversion. Cet article présentera comment utiliser la fonction ImageFlip () en PHP pour obtenir un effet miroir d'ajustement virtuel simple, principalement via la fonction de flip d'image pour simuler l'effet de pansement du miroir gauche et droit.

1. Comprendre ImageFlip ()

PHP a introduit la fonction ImageFlip () depuis 5.5.0, qui est utilisée pour retourner les images. La syntaxe est la suivante:

 bool imageflip(GdImage $image, int $mode)

Le paramètre Mode $ peut être l'une des trois constantes suivantes:

IMG_FLIP_HORIZONTAL : Flip horizontal (miroir gauche et gauche et droit)
IMG_FLIP_VERTICAL : Vertical Flip (miroir de haut en bas)
Img_flip_both : effectuer simultanément des flips horizontaux et verticaux

Dans la scène des miroirs d'ajustement virtuels, le plus couramment utilisé est le flip horizontal.

2. L'idée principale de l'effet d'ajustement simulé

L'utilisateur télécharge une photo frontale de lui-même;
Les utilisateurs choisissent un vêtements (PNG avec fond transparent);
Superposer le calque de vêtements sur la photo de l'utilisateur;
Utilisez ImageFlip () pour permettre aux utilisateurs de cliquer sur les boutons pour afficher l'effet de "In-mirror";
L'image traitée est enfin sortie.

3. Exemple d'implémentation de code

Voici un exemple de mise en œuvre simple:

 <?php
// Chargez des photos de l&#39;utilisateur
$userImage = imagecreatefromjpeg('uploads/user.jpg');

// Charger des vêtementsPNG（Avec fond transparent）
$clothesImage = imagecreatefrompng('assets/clothes/shirt1.png');

// Obtenez la largeur et la hauteur de la couche de vêtements
$clothesWidth = imagesx($clothesImage);
$clothesHeight = imagesy($clothesImage);

// Définissez la position des vêtements sur la carte utilisateur（Ici est supposé être placé au milieu）
$destX = (imagesx($userImage) - $clothesWidth) / 2;
$destY = 200; // Distance vers le haut 200px，Peut être ajusté au besoin

// Autoriser le traitement transparent
imagealphablending($userImage, true);
imagesavealpha($userImage, true);

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

// Si l&#39;utilisateur demande le mode miroir
if (isset($_GET['mirror']) && $_GET['mirror'] == '1') {
    imageflip($userImage, IMG_FLIP_HORIZONTAL);
}

// Image de sortie au navigateur
header('Content-Type: image/png');
imagepng($userImage);
imagedestroy($userImage);
imagedestroy($clothesImage);
?>

4. Exemple de page frontale

Ce qui suit est une version simple de la page frontale qui correspond au php ci-dessus:

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Miroir d&#39;ajustement virtuel</title>
</head>
<body>
    <h2>Miroir d&#39;ajustement virtuel</h2>
    <img src="http://m66.net/tryon.php" id="preview" style="max-width: 100%;"><br><br>
    <button onclick="mirror()">Interrupteur de miroir</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. Résumé

Grâce à la fonction ImageFlip () de PHP combinée à une fonction de synthèse d'image simple, nous pouvons facilement implémenter un effet miroir d'ajustement virtuel de base. Bien que cet exemple soit relativement simplifié, il a jeté les bases de la mise en œuvre d'un système d'habillage virtuel plus avancé. Vous pouvez ajouter davantage des images, un positionnement de reconnaissance du visage, une modélisation 3D et d'autres technologies pour améliorer le sens de la réalité.

J'espère que cet article vous sera utile, alors essayez-le!

imageflip

Connexe