如何在服务器端 PHP 上叠加两个或多个图像？

Question

我有<canvas>in HTML，它通过我的网络摄像头的 JS 图片获取，我需要从可叠加图像列表中选择图片，然后从叠加中制作图像。如何在没有任何框架的情况下将两个图像放入 PHP 并使其叠加？

我现在拥有的 HTML：

<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

好吧，我自己解决了我的问题并解决了两个图像的叠加，其中一个是从画布上获取的，第二个是使用imagecopy() 和imagepng() 标准 PHP 函数存储在服务器上的。为了从画布元素中获取它们，我使用了简单的 AJAX 函数。你可以在这里查看我的自学项目并提出改进建议：https://github.com/znatno/42-camagru

JS代码：

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 代码：

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;
}