PHP memanggil kamera untuk mengambil foto dan menambah penapis masa nyata: Panduan Mula Pantas-tutorial php-php.cn

PHP memanggil kamera untuk mengambil foto dan menambah penapis masa nyata: Panduan Mula Pantas

WBOY

Lepaskan： 2023-07-31 21:28:01

asal

1249 orang telah melayarinya

PHP memanggil kamera untuk mengambil foto dan menambah penapis masa nyata: Panduan Mula Pantas

Teknologi fotografi sentiasa berinovasi dan berkembang, dan kini, kami boleh menggunakan bahasa PHP untuk memanggil kamera dan menambah kesan penapis masa nyata untuk menambah lebih kepada foto kami Alangkah seronoknya. Artikel ini akan memberi anda panduan permulaan pantas untuk mengajar anda cara menggunakan PHP untuk memanggil kamera untuk mengambil foto dan menambah kesan penapis masa nyata yang diingini.

1. Pasang komponen dan perpustakaan yang diperlukan

Pertama, kita perlu memasang beberapa komponen dan perpustakaan yang diperlukan untuk melaksanakan fungsi ini. Kita perlu memasang komponen berikut:

Pustaka PHP-GD: Ia ialah perpustakaan pemprosesan imej PHP yang boleh digunakan untuk menambah penapis dan operasi pemprosesan imej lain.
Video4Linux: Ini ialah antara muka yang menyediakan fungsi tangkapan video untuk sistem Linux.

Anda boleh memasang komponen ini pada sistem Ubuntu anda melalui arahan berikut:

sudo apt-get install php-gd
sudo apt-get install v4l-utils

Salin selepas log masuk

2. Buat halaman pratonton masa nyata kamera

Seterusnya, kita perlu mencipta halaman PHP untuk memaparkan pratonton masa nyata daripada kamera. Anda boleh menggunakan kod berikut untuk membuat halaman mudah untuk memaparkan imej langsung kamera:

<!DOCTYPE html>
<html>
<head>
    <title>Camera Preview</title>
</head>
<body>
    <h1>Camera Preview</h1>
    <img id="preview" src="" width="640" height="480" />
    <script>
        var videoElem = document.createElement('video');
        var canvasElem = document.createElement('canvas');
        var context = canvasElem.getContext('2d');

        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            videoElem.srcObject = stream;
            videoElem.play();

            setInterval(function() {
                context.drawImage(videoElem, 0, 0, canvasElem.width, canvasElem.height);
                var imgData = canvasElem.toDataURL('image/jpeg');
                document.getElementById('preview').src = imgData;
            }, 1000);
        }).catch(function(error) {
            console.log('Error: ' + error.message);
        });
    </script>
</body>
</html>

Salin selepas log masuk

Kod ini menggunakan API getUserMedia JavaScript untuk mengakses kamera dan memaparkan imej pratonton langsung. Ia menarik imej masa nyata ke kanvas melalui elemen kanvas, menukar data imej kepada URL dalam format berkod Base64 dan memberikannya kepada elemen img yang memaparkan imej pratonton.

3. Tambahkan kesan penapis masa nyata

Kini, kami telah melaksanakan fungsi pratonton masa nyata kamera. Seterusnya, kami akan menambah kesan penapis langsung pada halaman ini. Anda boleh menggunakan perpustakaan PHP-GD untuk menambah pelbagai kesan penapis pada imej.

Pertama, kita perlu menambah kotak pemilihan penapis dan menghantar nilainya kepada kod PHP. Gunakan kod berikut untuk mengubah suai halaman pratonton yang dibuat di atas:

<!DOCTYPE html>
<html>
<head>
    <title>Camera Preview with Filters</title>
</head>
<body>
    <h1>Camera Preview with Filters</h1>
    <img id="preview" src="" width="640" height="480" />
    <select id="filter">
        <option value="none">None</option>
        <option value="grayscale">Grayscale</option>
        <option value="sepia">Sepia</option>
        <option value="invert">Invert</option>
    </select>

    <script>
        // ... JavaScript code for camera preview ...

        document.getElementById('filter').addEventListener('change', function() {
            var filter = this.value;
            var imgData = canvasElem.toDataURL('image/jpeg');
            
            // Send imgData and filter to server-side PHP code for processing
        });
    </script>
</body>
</html>

Salin selepas log masuk

Kami menambahkan elemen pilih sebagai kotak pemilihan penapis dan menambah pendengar acara dalam JavaScript Apabila nilai kotak pilihan berubah, penapis yang dipilih akan menjadi Nilai dan data imej dihantar ke kod PHP sebelah pelayan untuk diproses.

Kini, kami perlu menerima data ini dalam kod PHP sebelah pelayan dan menambah kesan yang sepadan pada imej berdasarkan nilai penapis yang dipilih. Gunakan kod berikut untuk mencipta fail PHP bebas untuk memproses kesan penapis:

<?php
// Process the image based on the selected filter
if(isset($_POST['filter']) && isset($_POST['imgData'])) {
    $imgData = $_POST['imgData'];
    $filter = $_POST['filter'];
    
    // Create GD image resource from Base64 image data
    $imgResource = imagecreatefromstring(base64_decode(str_replace('data:image/jpeg;base64,', '', $imgData)));

    // Apply filters based on the selected option
    switch($filter) {
        case 'none':
            break;
        case 'grayscale':
            imagefilter($imgResource, IMG_FILTER_GRAYSCALE);
            break;
        case 'sepia':
            imagefilter($imgResource, IMG_FILTER_GRAYSCALE);
            imagefilter($imgResource, IMG_FILTER_COLORIZE, 90, 60, 40);
            break;
        case 'invert':
            imagefilter($imgResource, IMG_FILTER_NEGATE);
            break;
    }

    // Output the filtered image
    header('Content-Type: image/jpeg');
    imagejpeg($imgResource);

    // Clean up resources
    imagedestroy($imgResource);
}
?>

Salin selepas log masuk

Kod ini menggunakan perpustakaan PHP-GD untuk menambah kesan yang sepadan pada imej berdasarkan nilai penapis yang diterima dan mengeluarkan imej yang diproses dalam format JPEG.

Akhir sekali, kami perlu mengubah suai halaman pratonton sebelumnya untuk menghantar data imej dan pilihan penapis ke kod PHP sebelah pelayan untuk diproses. Ubah suai kod JavaScript dalam halaman pratonton yang dibuat sebelum ini dan gantikannya dengan kod berikut:

// ... JavaScript code for camera preview ...

document.getElementById('filter').addEventListener('change', function() {
    var filter = this.value;
    var imgData = canvasElem.toDataURL('image/jpeg');
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'filter.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('preview').src = 'data:image/jpeg;base64,' + xhr.responseText;
        }
    };

    var data = 'filter=' + encodeURIComponent(filter) + '&imgData=' + encodeURIComponent(imgData);
    xhr.send(data);
});

Salin selepas log masuk

Melalui objek XMLHttpRequest JavaScript, kami boleh menghantar permintaan POST untuk menghantar nilai penapis dan data imej yang dipilih ke kod PHP sebelah pelayan untuk diproses . Kemudian, kami menetapkannya kepada atribut src imej pratonton berdasarkan data yang dikodkan Base64 bagi imej yang diproses yang dikembalikan oleh pelayan.

Kini, anda boleh membuka halaman pratonton ini dalam penyemak imbas anda dan cuba memilih kesan penapis yang berbeza untuk melihat perubahan dalam imej pratonton masa nyata. Apabila anda mengklik butang foto, kod PHP akan menambah kesan penapis yang dipilih pada imej dan mengeluarkannya.

Artikel ini menyediakan panduan permulaan pantas yang ringkas tetapi asas untuk mengajar anda cara menggunakan PHP untuk memanggil kamera untuk mengambil foto dan menambah kesan penapis masa nyata. Dengan menggunakan pustaka PHP-GD dan antara muka Video4Linux, anda boleh melanjutkan dan menambah baik fungsi ini serta menambahkan lebih banyak kesan kreatif pada foto anda. Selamat mengekod!

Rujukan:

[PHP GD](https://www.php.net/manual/en/book.image.php)
[Video4Linux](https://www.kernel. org /doc/html/v4.15/media/uapi/v4l/v4l2.html)

Atas ialah kandungan terperinci PHP memanggil kamera untuk mengambil foto dan menambah penapis masa nyata: Panduan Mula Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!