Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the photo function of html5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Video stream

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

Copy the code

The code is as follows:

Varvideo_element=document.getElementById ('video')

If (navigator.getUserMedia) {/ / operashoulduseopera.getUserMedianow

Navigator.getUserMedia ('video',success,error)

}

Functionsuccess (stream) {

Video_element.src=stream

}

Video stream

2. Take a picture

Photo function, we use HTML5's Canvas to capture the contents of Video tags in real time, and the Video element can be used as the input of Canvas images, which is great. The main code is as follows:

Copy the code

The code is as follows:

JavaScript Code copies 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 (0pyrrine cwjinch)

Ctx.drawImage (video_element,0,0,vvw,vvh,0,0,vw,vh)

Document.body.append (canvas)

3. Picture acquisition

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

Copy the code

The code is as follows:

Var imgData=canvas.toDataURL ("image/png")

Because the real image data is the part after the comma encoded by base64, the actual image data processed by our server should be this part, and we can get it in two ways.

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

Copy the code

The code is as follows:

Var data=imgData.substr (22)

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

Copy the code

The code is as follows:

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

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

Copy the code

The code is as follows:

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

4. Upload pictures

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

Copy the code

The code is as follows:

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

In the background, we use PHP scripts to receive data and store it as pictures.

Copy the 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)

}

This is the end of the article on "how to take pictures in html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.