Bagaimana untuk melaksanakan fungsi kamera menggunakan javascript+php

Dengan perkembangan teknologi fotografi yang berterusan, kami kini boleh mengambil gambar melalui tapak web atau APP. Javascript dan PHP adalah teknologi yang biasa digunakan dalam pembangunan web Artikel ini akan memperkenalkan cara menggunakan kedua-dua teknologi ini untuk melaksanakan fungsi kamera.

1. Gunakan Javascript untuk mengambil foto

Gunakan Javascript dalam penyemak imbas untuk mendapatkan imej kamera, dan kemudian gunakan Kanvas untuk mengambil foto. Kami boleh menggunakan API getUserMedia HTML5 untuk mendapatkan kebenaran kamera dan melukis skrin kamera ke Kanvas.

(1) Dapatkan kebenaran kamera

Menggunakan getUserMedia API untuk mendapatkan kebenaran kamera memerlukan menghantar objek MediaStream yang mengandungi kamera dan peranti audio ke fungsi panggil balik. Objek ini boleh diperolehi dengan memanggil fungsi navigator.mediaDevices.getUserMedia.

navigator.mediaDevices.getUserMedia({ 
    video: true,
    audio: false
}).then(stream => {
    let video = document.querySelector('video');
    video.srcObject = stream;
}).catch(error => {
    console.log(error);
});

Dalam kod di atas, kami menggunakan fungsi navigator.mediaDevices.getUserMedia() untuk meminta kebenaran pengguna. Antaranya, parameter video menunjukkan meminta strim video, dan parameter audio menunjukkan meminta strim audio. Jika pengguna bersetuju, objek MediaStream yang mengandungi aliran video dan aliran audio akan dikembalikan. Jika pengguna enggan atau peranti tidak menyokongnya, objek ralat dikembalikan.

(2) Lukis skrin kamera pada Kanvas

Selepas mendapatkan strim video, kita perlu menukar video itu menjadi skrin dan memaparkannya pada halaman. Proses ini boleh dicapai melalui gabungan elemen Video dan elemen Kanvas.

<video id="video" autoplay="true" width="300px" height="200px" ></video>
<canvas id="canvas" width="300px" height="200px" ></canvas>

Pertama, kami meletakkan elemen Video dan elemen Kanvas pada halaman. Elemen Video digunakan untuk memainkan video, dan elemen Kanvas digunakan untuk memaparkan pemandangan yang akan dirakam. Dengan memanggil kaedah getContext('2d') Canvas, anda boleh mendapatkan konteks kanvas, dan kemudian menggunakan kaedah drawImage untuk melukis video ke kanvas.

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

let video = document.querySelector('video');
let width = canvas.width;
let height = canvas.height;

ctx.drawImage(video, 0, 0, width, height);

Dalam kod di atas, kami memperoleh konteks elemen Kanvas, dan kemudian lukis gambar elemen Video pada Kanvas melalui kaedah drawImage. Parameter pertama kaedah drawImage menentukan elemen yang akan dilukis, parameter kedua dan ketiga menentukan kedudukan lukisan, dan parameter keempat dan kelima menentukan lebar dan ketinggian lukisan.

(3) Laksanakan fungsi kamera

Akhir sekali, kita perlu melaksanakan fungsi kamera. Fungsi kamera sebenarnya menjana gambar daripada imej yang sedang berada di Kanvas. Kita boleh mencapai ini melalui kaedah toDataURL(). Kaedah

let dataURL = canvas.toDataURL();

toDataURL akan mengekod imej pada kanvas ke dalam rentetan yang dikodkan Base64, jadi kami boleh menyerahkan rentetan ini kepada pelayan sebagai nilai borang.

2. Gunakan PHP untuk memproses data foto

Di bahagian pelayan, kami boleh menggunakan PHP untuk memproses data foto yang diserahkan daripada pelanggan. Secara khusus, kita perlu menyahkod data yang dikodkan Base64 ke dalam data binari dan kemudian menyimpannya ke laluan yang ditentukan.

$image_data = $_POST['image_data'];
$image_data = str_replace('data:image/png;base64,', '', $image_data);
$image_data = str_replace(' ', '+', $image_data);

$image_binary = base64_decode($image_data);

$filename = date('YmdHis') . '.png';
$filedir = './upload/';
$file = $filedir . $filename;

file_put_contents($file, $image_binary);

Dalam kod di atas, kami mula-mula mendapatkan data imej yang dikodkan Base64 daripada permintaan POST, kemudian alih keluar pengepala pengekodan dan ruang, dan kemudian gunakan base64_decode untuk menyahkod imej kepada data binari. Akhir sekali, kami menyimpan imej ke folder yang ditentukan oleh pelayan.

3. Kesimpulan

Melalui gabungan Javascript dan PHP, kami boleh melaksanakan fungsi kamera yang lengkap dan menyimpan data ke pelayan. Fungsi ini boleh digunakan pada album foto dalam talian, memuat naik avatar, pengesahan identiti, dsb.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi kamera menggunakan javascript+php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!