Detail Issue - Tidak bisa ganti background Gambar

Error 2025-12-17 23:27:59
Tidak bisa ganti background Gambar

Language: PHP
Description

Saat percobaan ganti background gambar menumpuk
Code Snippet

<?php
if (isset($_POST['image'])) {
    $img = $_POST['image'];
    $folderPath = "uploads/"; 
    if (!file_exists($folderPath)) { mkdir($folderPath, 0777, true); }
    
    $image_parts = explode(";base64,", $img);
    $image_base64 = base64_decode($image_parts[1]);
    
    $fileName = 'selfie_bg_' . uniqid() . '.png';
    $file = $folderPath . $fileName;
    
    if (file_put_contents($file, $image_base64)) {
        echo "" . $fileName;
    } else {
        echo "";
    }
    exit;
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body { font-family: sans-serif; text-align: center; background: #f4f4f4; padding: 20px; }
        #camera_container, #preview_container { position: relative; width: 320px; margin: 10px auto; }
        video, canvas { width: 320px; height: 240px; border: 5px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
        .controls { margin-top: 15px; }
        button { padding: 10px 20px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 5px; margin: 5px; }
        .hidden { display: none; }
        select { padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>

    <h2></h2>

    <div class="controls">
        <label>Pilih Background:</label>
        <select id="bgSelect">
            <option value="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=320&h=240&fit=crop">Pemandangan Alam</option>
            <option value="https://images.unsplash.com/photo-1449156001931-82992a472695?w=320&h=240&fit=crop">Kantor Modern</option>
            <option value="https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?w=320&h=240&fit=crop">Ruang Abstrak</option>
        </select>
    </div>

    <div id="camera_container">
        <video id="video" autoplay></video>
        <button onclick="takeSnap()">Ambil Foto</button>
    </div>

    <div id="preview_container" class="hidden">
        <canvas id="canvas" width="320" height="240"></canvas>
        <div class="controls">
            <button onclick="resetCamera()" style="background:#666">Ulangi</button>
            <button onclick="uploadFoto()" style="background:#28a745">Upload Hasil Gabungan</button>
        </div>
    </div>

    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const bgSelect = document.getElementById('bgSelect');

        navigator.mediaDevices.getUserMedia({ video: true })
            .then(stream => { video.srcObject = stream; })
            .catch(err => { alert("Kamera tidak aktif"); });

        function takeSnap() {
            const bgImage = new Image();
            bgImage.crossOrigin = "Anonymous"; // Agar bisa mengambil gambar dari URL luar
            bgImage.src = bgSelect.value;

            bgImage.onload = function() {
    
                context.drawImage(bgImage, 0, 0, 320, 240);
               
                context.globalAlpha = 0.8; // Membuat selfie agak transparan agar BG terlihat (opsional)
                context.drawImage(video, 0, 0, 320, 240);
                context.globalAlpha = 1.0;

                document.getElementById('camera_container').classList.add('hidden');
                document.getElementById('preview_container').classList.remove('hidden');
            };
        }

        function resetCamera() {
            document.getElementById('camera_container').classList.remove('hidden');
            document.getElementById('preview_container').classList.add('hidden');
        }

        function uploadFoto() {
            const imageData = canvas.toDataURL('image/png');
            let formData = new FormData();
            formData.append('image', imageData);

            fetch('foto.php', { method: 'POST', body: formData })
            .then(response => response.text())
            .then(data => { alert(data); location.reload(); });
        }
    </script>