HTML5 call phone camera to achieve photo upload function

Today do mobile website, want to realize mobile phone scan QR code function. The first is to call the phone camera in the browser, to achieve the camera function and to display the photos taken on the page and uploaded to the server, and then on the server side of the analysis.

The first implementation in the browser to call the camera, of course, with the current fire of the HTML5,HTML5 in the <video> tag, and will get the video from the camera as the input source of this tag. HTML5 code to implement the camera function:

<article> <style scoped> Video {Transform:scalex (-1);} p {text-align:center;} </style> 
After I test in the Android phone's Opera browser browser can be normal to achieve the phone camera function. Google Chrome is not working on Android phones, and its own browser has failed to test. The iphone's Safari browser is also not supported.
To learn more about HTML5 call the phone camera content can be clicked http://dev.w3.org/2011/webrtc/editor/getusermedia.html.
get the picture :
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.
HTML code
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:
HTML code
var data = Imgdata.substr (22);
If you want to get the size of the picture before uploading it, you can use:
HTML code
var length = Atob (data). length;//Atob Decodes a string of data which has been encoded using BASE-64 encoding
The second is to intercept the 22-bit string in the background language after the backend gets the transmitted data. For example, in PHP
PHP Code:
$image = Base64_decode (Str_replace (' data:image/jpeg;base64, ', ' ', $data);
Image upload:
In the front end you can use Ajax to upload the image data obtained above to the background script. For example, when using jquery:
JS Code
$.post (' upload.php ', {' Data ': Data});
In the background we use a PHP script to receive data and store it as a picture.
PHP code
function Convert_data ($data) {
$image = Base64_decode (Str_replace (' data:image/jpeg;base64, ', ' ', $data);
Save_to_file ($image);
}
function Save_to_file ($image) {
$fp = fopen ($filename, ' w ');
Fwrite ($fp, $image); Fclose ($FP);
}
Please note that the above solution can be used not only for web app photo uploads, but also for the ability to convert canvas output to image upload. 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 call phone camera to achieve photo upload function