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

This article is about how to use HTML5 to implement photo upload application. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

With the support of HTML5 specification, it has become possible for WebApp to take pictures on mobile phones. Below, I will explain how Web App takes pictures with his mobile phone, displays them on the page, and uploads them to the server.

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

XML/HTML Code copies content to the clipboard

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:

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".

JavaScript Code copies content to the clipboard

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:

JavaScript Code copies content to the clipboard

Var data=imgData.substr (22)

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

JavaScript Code copies content to the clipboard

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:

JavaScript Code copies content to the clipboard

$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:

JavaScript Code copies content to the clipboard

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

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

JavaScript Code copies content to the clipboard

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 upload, but also you can convert the Canvas output into image upload function. In this way, you can use Canvas to provide users with image editing functions such as cropping, coloring and graffiti, and then save the edited images to the server.

Thank you for reading! This is the end of the article on "how to use HTML5 to upload photos". 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, you can 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.