HTML5 easy to achieve photo upload function [reprint]

Reprint Http://www.18sucai.com/article/275.htm

Traditional methods if you want to achieve the camera function, need to write complex background applications, but with the development of HTML5, with the support of the HTML5 specification, the Web app has realized the mobile phone photo function, completely using HTML5 technology to complete. In the following, I will explain how the Web app can be photographed on a mobile phone, displayed on the page and uploaded to the server.

First of all, the photo is definitely a video stream, HTML5 can be implemented to obtain the video stream, mainly using the Getusermedia () method.

1. HTML5 Get Video stream

HTML5 the Media Capture API provides programmatic access to the camera, which allows the user to get the video stream provided by the camera directly with Getusermedia. What we need to do is add a HTML5 video tag and get the videos from the camera as the input source for this tag (please note that only Chrome and opera support Getusermedia at this time).

Xml/html code copy content to clipboard
<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>

2. Take photos in HTML5

Photo function, we use HTML5 canvas to capture the contents of the video tag in real time, the video element can be used as a canvas image input, which is very good. The main code is as follows:

JavaScript code to copy content to 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, HTML5 get pictures

Below we are going to get the image data from canvas, the core idea is to use canvas todataurl to convert the canvas's data into Base64 bit-encoded PNG images, similar to the "data:image/png;base64,xxxxx" format.

JavaScript code to copy content to clipboard
var imgdata=canvas.todataurl ("Image/png");
Since the real image data is the part after the comma of the Base64 code, the image data that our actual server processes should be this part, we can get it in two ways.

The first is to intercept 22-bit strings on the front end as image data, for example:

JavaScript code to copy content to clipboard
var data=imgdata.substr (22);
If you want to get the size of the picture before uploading it, you can use:

JavaScript code to copy content to clipboard
var Length=atob (data). length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding
The second is to intercept the 22-bit string in the background language after the backend gets the transmitted data. For example in PHP:

JavaScript code to copy content to clipboard
$image =base64_decode (Str_replace (' data:image/jpeg;base64, ', ', $data);

4, HTML5 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 to copy content to clipboard
$.post (' upload.php ', {' Data ':d ATA});
In the background we use a PHP script to receive data and store it as a picture.

JavaScript code to copy content to 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 is not only used for web app photo uploads, but also allows you to convert the canvas's output to a picture upload function. This allows you to use canvas to provide the user with picture editing, such as cropping, coloring, and doodling, and then saving the image that the user has finished editing to the server.

HTML5 easy to achieve photo upload function [reprint]