Как сделать наложение двух или более изображений на стороне сервера PHP? - PullRequest
Новая
       27

Как сделать наложение двух или более изображений на стороне сервера PHP?

0 голосов
/ 23 марта 2020

У меня <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>

1 Ответ

0 голосов
/ 11 апреля 2020

Ну, я сам решил свою проблему и решил наложить два изображения между ними, одно из которых получено с холста, а второе сохранено на сервере с imagecopy () и imagepng () Стандарт PHP Функции. Для получения их из элемента canvas я использовал простую функцию 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;
}
...