How to make the superposing of two or more images on server-side PHP?

Question

I have <canvas>in HTML that is getting via JS picture from my web camera, and I need to select pictures from the list of superposable images and then make an image from the superposing. How is possible to get two images into PHP and make them superposing without any frameworks?

HTML that I have at this moment:

<div class="form-group" id="snap-new-photo">
            <video style="background-color: #777" id="video" width="640" height="480" autoplay></video>
            <button id="snap">Snap Photo</button>
</div>

<script type="text/javascript">
            // Put event listeners into place
            window.addEventListener("DOMContentLoaded", () => {
                // Grab elements, create settings, etc.
                const canvas = document.getElementById('canvas');
                const context = canvas.getContext('2d');
                const video = document.getElementById('video');
                const snapButton = document.getElementById('snap');

                navigator.getMedia = ( navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia ||
                    navigator.msGetUserMedia );

                navigator.getMedia({ video: true },
                    function(stream) {
                        if (navigator.mozGetUserMedia) {
                            video.mozSrcObject = stream
                        }
                        else {
                            video.srcObject = stream
                        }
                        video.play();
                    },
                    function(err) {
                        snapButton.disabled = true;
                    }
                );

                // Trigger photo take
                document.getElementById('snap').addEventListener('click', () => {
                    context.drawImage(video, 0, 0, 640, 480);
                });
            }, false);
</script>

Answer 1

Well, I figured out my problem by myself and solved superposing of two images among them one is getting from the canvas and second is stored on the server with imagecopy() and imagepng() standart PHP functions. For getting them from canvas element I used simple AJAX function. You can look and suggest improvements of my self-educational project here: https://github.com/znatno/42-camagru

JS Code:

saveSnapBtn.addEventListener('click', () => {
    let imageBase64 = convertCanvasToImage(canvas).src;

    // Process uploading
    ajax('/create/new-upload', `image=${imageBase64}&maskFilename=${maskFilename}`, (json) => {
        if (json) {
            if (json.status === 'Success') {
                alert(json.status + ': ' + json.message);
            } else {
                alert(json.status + ': ' + json.message);
            }
        }
        draw(video, context);
        })
    });

PHP Code:

public function createImage($img_base64, $mask_filename) {

    if (empty($mask_filename)) {
        $this->error = 'No mask selected';
        return false;
    }

    // Base64 to Image
    $img_base64 = str_replace('data:image/png;base64,', '', $img_base64);
    $img_base64 = str_replace(' ', '+', $img_base64);
    $img_data = base64_decode($img_base64);

    // Creating Image
    $src = imagecreatefrompng('pub/res/masks/src/' . $mask_filename . '.png');
    $dest = imagecreatefromstring($img_data);
    imagecopy($dest, $src, 0, 0, 0, 0, 640, 480); //have to play with these numbers for it to work for you, etc.
    header('Content-Type: image/png');
    $filename = uniqid('', true) . '.png';
    $path = 'pub/photos/' . $filename;
    // Saving to path
    $status = imagepng($dest, $path);
    imagedestroy($dest);
    imagedestroy($src);

    // Saving to Database
    if ($status) {
        $sql = 'INSERT INTO db_ibohun.photos (id, username, user_id, path, timestamp)
            VALUES (:id, :username, :user_id, :path, :timestamp)';
        $params = [
            'id' => 0,
            'username' => $_SESSION['user']['username'],
            'user_id' => $_SESSION['user']['id'],
            'path' => $path,
            'timestamp' => date('Y-m-d H:i:s'),
        ];
        $this->db->query($sql, $params);
    } else {
        $this->error = 'Error during saving. Please, try again';
    }

    // Return success or error
    return $status;
}