HTML5 camera function implementation code (html5 upload file)_html5 tutorial skills

1. Video streaming

HTML5 The Media Capture API provides programmable access to the camera. Users can directly use getUserMedia to obtain the video stream provided by the camera. What we need to do is add an HTML5 Video tag and use the video obtained from the camera as the input source of this tag (please note that currently only Chrome and Opera support getUserMedia).

Copy code

The code is as follows:

<script> <br>varvideo_element=document.getElementById('video'); <br>if(navigator.getUserMedia){//operashoulduseopera.getUserMedianow <br>navigator. getUserMedia('video',success,error); <br>} <br>functionsuccess(stream){ <br>video_element.src=stream; <br>} <br></script>

Video streaming

2. Take photos

For the camera function, we use HTML5 Canvas to capture the content of the Video tag in real time. The Video element can be used as the input of the Canvas image, which is great. The main code is as follows:

Copy code

The code is as follows:

JavaScript CodeCopy the content to the clipboard
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var cw=vw;
var ch=vh;
ctx.fillStyle =”#ffffff”;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,vvw,vvh,0,0,vw,vh);
document.body.append(canvas);

3. Image acquisition

Next we are going to get image data from Canvas. The core idea is to use canvas's toDataURL to convert the Canvas data into a base64-bit encoded PNG image, similar to the format of "data:image/png;base64,xxxxx".

Copy code

The code is as follows:

var imgData=canvas.toDataURL(“image /png”);

Because the real image data is the part after the comma in base64 encoding, the image data processed by our actual server should be this part. We can obtain it in two ways.

The first method is to intercept the string after 22 bits at the front end as image data, for example:

Copy code

The code is as follows:

var data=imgData.substr(22) ;

If you want to get the size of the image before uploading, you can use:

Copy code

The code is as follows:

var length=atob(data).length ;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

The second method is to use the background language to intercept the string after 22 digits after obtaining the transmitted data at the back end. For example, in PHP:

Copy code

The code is as follows:

$image=base64_decode(str_replace('data :image/jpeg;base64,',”,$data);

4. Image upload

On the front end, you can use Ajax to upload the image data obtained above to the background script. For example when using jQuery:

Copy code

The code is as follows:

$.post('upload.php' ,{'data':data});

In the background, we use a PHP script to receive the data and store it as an image.

Copy code

The code is as follows:

functionconvert_data($data){
$image=base64_decode(str_replace('data:image/jpeg;base64,',",$data);
save_to_file($image);
}
functionsave_to_file($image){
$ fp=fopen($filename,'w');
fwrite($fp,$image);
fclose($fp);
}

Please note that the above solution can not only be used for Web App photo uploading, but you can also implement the function of converting Canvas output into image uploading. In this way, you can use Canvas to provide users with image editing, such as cropping, coloring, and graffiti drawing board functions, and then save the user's edited images to the server.