HTML5 call phone camera to achieve photo upload function

Source: Internet
Author: User
Tags php script

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.