How to implement the camera function using javascript+php

With the continuous development of photography technology, we can now take photos through websites or APPs. Javascript and PHP are commonly used technologies in web development. This article will introduce how to use these two technologies to implement the camera function.

1. Use Javascript to take pictures

Use Javascript in the browser to obtain the camera image, and then use Canvas to take pictures. We can use the getUserMedia API of HTML5 to obtain the permissions of the camera and draw the camera screen to the Canvas.

(1) Obtain camera permissions

Using the getUserMedia API to obtain camera permissions requires passing a MediaStream object containing the camera and audio device to the callback function. This object can be obtained by calling the navigator.mediaDevices.getUserMedia function.

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

In the above code, we use the navigator.mediaDevices.getUserMedia() function to request the user's permissions. Among them, the video parameter indicates requesting a video stream, and the audio parameter indicates requesting an audio stream. If the user agrees, a MediaStream object containing the video stream and audio stream will be returned. If the user refuses or the device does not support it, an error object is returned.

(2) Draw the camera picture onto the Canvas

After obtaining the video stream, we need to convert the video into a picture and display it on the page. This process can be achieved through a combination of Video elements and Canvas elements.

First, we place a Video element and a Canvas element on the page. The Video element is used to play videos, and the Canvas element is used to display the scene to be shot. By calling the getContext('2d') method of Canvas, you can obtain the context of the canvas, and then use the drawImage method to draw the video to the canvas.

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

In the above code, we obtain the context of the Canvas element, and then draw the Video element's picture onto the Canvas through the drawImage method. The first parameter of the drawImage method specifies the element to be drawn, the second and third parameters specify the drawing position, and the fourth and fifth parameters specify the width and height of the drawing.

(3) Implement the camera function

Finally, we need to implement the camera function. The camera function actually generates a picture from the image currently on the Canvas. We can achieve this through the toDataURL() method.

let dataURL = canvas.toDataURL();

The toDataURL method will encode the image on the canvas into a Base64 encoded string, so we can submit this string to the server as the value of the form.

2. Use PHP to process photo data

On the server side, we can use PHP to process the photo data submitted from the client. Specifically, we need to decode the Base64-encoded data into binary data and then save it to the specified path.

$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);

In the above code, we first obtain the Base64-encoded data of the image from the POST request, then remove the encoding header and spaces, and then use base64_decode to decode the image into binary data. Finally, we save the image to the folder specified by the server.

3. Conclusion

Through the combination of Javascript and PHP, we can implement a complete camera function and save the data to the server. This function can be applied to online photo albums, avatar uploading, identity verification, etc.

The above is the detailed content of How to implement the camera function using javascript+php. For more information, please follow other related articles on the PHP Chinese website!