利用imageflip() 實現虛擬試衣鏡效果

M66 2025-05-31

在現代電子商務網站中，虛擬試衣鏡功能變得越來越受歡迎。它不僅能為用戶帶來更加沉浸式的購物體驗，還能提升轉化率。本文將介紹如何使用PHP 中的imageflip()函數來實現一個簡單的虛擬試衣鏡效果，主要通過圖像翻轉功能來模擬左右鏡像穿衣效果。

一、了解imageflip()

PHP 從5.5.0 開始引入了imageflip()函數，它用於對圖像進行翻轉操作。其語法如下：

 bool imageflip(GdImage $image, int $mode)

其中$mode參數可以是以下三種常量之一：

IMG_FLIP_HORIZONTAL ：水平翻轉（左右鏡像）
IMG_FLIP_VERTICAL ：垂直翻轉（上下鏡像）
IMG_FLIP_BOTH ：同時進行水平和垂直翻轉

在虛擬試衣鏡的場景中，最常用的是水平翻轉。

二、模擬試衣效果的核心思路

用戶上傳一張自己的正面照；
用戶選擇一件衣服（PNG 帶透明背景）；
將衣服圖層疊加到用戶照片上；
使用imageflip()讓用戶可以點擊按鈕查看“鏡中”的效果；
最終輸出處理後的圖像。

三、示例代碼實現

下面是一個簡單的實現示例：

 <?php
// 加載用戶照片
$userImage = imagecreatefromjpeg('uploads/user.jpg');

// 加載衣服PNG（帶透明背景）
$clothesImage = imagecreatefrompng('assets/clothes/shirt1.png');

// 獲取衣服圖層的寬高
$clothesWidth = imagesx($clothesImage);
$clothesHeight = imagesy($clothesImage);

// 設置衣服在用戶圖上的位置（這裡假設放在中間）
$destX = (imagesx($userImage) - $clothesWidth) / 2;
$destY = 200; // 距離頂部 200px，可根據需要調整

// 允許透明處理
imagealphablending($userImage, true);
imagesavealpha($userImage, true);

// 合併圖像
imagecopy($userImage, $clothesImage, $destX, $destY, 0, 0, $clothesWidth, $clothesHeight);

// 如果用戶請求鏡像模式
if (isset($_GET['mirror']) && $_GET['mirror'] == '1') {
    imageflip($userImage, IMG_FLIP_HORIZONTAL);
}

// 輸出圖像到瀏覽器
header('Content-Type: image/png');
imagepng($userImage);
imagedestroy($userImage);
imagedestroy($clothesImage);
?>

四、前端頁面示例

以下是與上述PHP 配套的前端頁面簡易版本：

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>虛擬試衣鏡</title>
</head>
<body>
    <h2>虛擬試衣鏡</h2>
    <img src="http://m66.net/tryon.php" id="preview" style="max-width: 100%;"><br><br>
    <button onclick="mirror()">鏡像切換</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>

五、總結

通過PHP 的imageflip()函數配合簡單的圖像合成功能，我們可以很容易地實現一個基本的虛擬試衣鏡效果。雖然這個示例相對簡化，但它已經為實現更高級的虛擬換裝系統打下了基礎。你可以進一步加入圖像縮放、人臉識別定位、3D 建模等技術來提升真實感。

希望這篇文章對你有所幫助，快動手試試看吧！

imageflip