Html5 photo function implementation code (htm5 uploads files)

Comments: With the support of HTML5 specifications, WebApp photos on mobile phones have become possible. Below, I will explain how to use a mobile phone to take photos of Web apps, display them on the page, and upload them to the server.

1. Video Stream

HTML5 The Media Capture API provides programmable access to The camera. You 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 obtain the Video from the camera as the input source for this tag (note that currently only Chrome and Opera Support getUserMedia ).

The Code is as follows:
<Videoidvideoid = "video" autoplay = ""> </video>
<Script>
Varvideo_element = document. getElementById ('video ');
If (navigator. getUserMedia) {// operashoulduseopera. getUserMedianow
Navigator. getUserMedia ('video', success, error );
}
Functionsuccess (stream ){
Video_element.src = stream;
}
</Script>

Video Stream

2. Take a photo

The camera function uses the Canvas of HTML5 to capture the Video TAG content 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:

 
The Code is as follows:
Copy the content to the clipboard using JavaScript Code
Var canvas = document. createElement ('canvas ');
Var ctx = canvas. getContext ('2d ');
Var cw = vw;
Var ch = FLAC;
Ctx. fillStyle = "# ffffff ";
Ctx. fillRect (0, 0, cw, ch );
Ctx. drawImage (video_element, 0, 0, vvw, VWV, vw, or otherwise );
Document. body. append (canvas );

3. Image Retrieval

The core idea of getting image data from Canvas is to use toDataURL of canvas to convert Canvas data to a base64-bit encoded PNG image, similar to "data: image/png; base64, xxxxx format.

The Code is as follows:
Var imgData = canvas. toDataURL ("image/png ");

Because the real image data is a part of the base64 encoded comma, we can use two methods to obtain the actual image data processed by the server.

The first is to take 22 character strings from the front end as image data. For example:

The Code is as follows:
Var data = imgData. substr (22 );

To obtain the image size before uploading, you can use:

 
The Code is as follows:
Var length = atob (data). length; // atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding

The second type is to use background language to intercept 22-bit strings after the backend obtains the transmitted data. For example, in PHP:

The Code is as follows:
$ Image = base64_decode (str_replace ('data: image/jpeg; base64, ', ", $ data );

4. upload images

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

The Code is as follows:
$. Post ('upload. php', {'data': data });

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

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

Note that the preceding solution can not only be used for Web App photo upload, but also convert Canvas output to Image Upload. 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.