Use HTML5 in website construction to realize the function of photo uploading using mobile camera

HTML5 Technical Support WebApp take photos on the phone, display on the page and upload to the server. This is a common feature of mobile site construction, and of course you can use this technique appropriately in other types of applications.

1. Video streaming

The HTML5 's media capture API provides programmatic access to the camera and allows users to get video streaming from the camera directly with the Getusermedia (please note that only Chrome and opera support is currently supported). What we need to do is add a HTML5 video tag and take the videos from the camera as the input source for this tag.

<video id= "video" autoplay= "" ></video>
<script>
var Video_element=document.getelementbyid (' video ');
if (Navigator.getusermedia) {//opera should use Opera.getusermedianow
Navigator.getusermedia (' video ', success,error); Success is a callback function, and of course you can write an anonymous function directly here.
}
Function success (stream) {
Video_element.src=stream;
}
</script>
A dynamic video stream is displayed in the video tag. You need to take a picture below.
2. Taking pictures

Taking pictures is the canvas feature of HTML5, which captures the contents of the video tag in real time because the video element can be used as input to the canvas image, so this is a good implementation. The main code is as follows:

var canvas=document.createelement (' canvas '); Creating Canvas objects Dynamically
var ctx=canvas.getcontext (' 2d ');
var CW=VW,CH=VH;
Ctx.fillstyle= "#ffffff";
Ctx.fillrect (0,0,CW,CH);
Ctx.drawimage (VIDEO_ELEMENT,0,0,CW,CH,0,0,VW,VH); Draws a specified area of the video object to a specified area on the canvas, making unequal, unequal-to-large plots.
Document.body.append (canvas);

3. Image Acquisition

The core idea of getting picture data from canvas is to convert the canvas's data into a base64 bit-encoded PNG image, similar to the "data:image/png;base64,xxxxx" format, using Canvas's todataurl.

var imgdata=canvas.todataurl ("Image/png");

In this way, the Imgdata variable stores a long string of character data content, representing the Base64 encoding of a PNG image. Because the real image data is the part after the Base64 code comma, so the actual server to receive the image data should be this part, we can use two ways to obtain.
The first is to intercept 22-bit strings on the front end as image data, for example:

var data=imgdata.substr (22);

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

var Length=atob (data). length; Atob decoding strings decoded with base-64
The second type is to intercept the 22-bit strings in the backend language after the backend gets the transmitted data (i.e., skip the above step to upload directly in the foreground). For example in PHP:

$image =base64_decode (Str_replace (' data:image/jpeg;base64, ', ', $data);
4, 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, you can use:

$.post (' upload.php ', {' Data ':d ATA});
In the background we use a PHP script to receive data and store it as a picture.

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

The above solution can not only be used for web app photo upload, but also through the editing function of canvas to provide image editing, such as cropping, coloring, graffiti, punctuate and other functions, and then the user edited image upload saved to the server.

Use HTML5 in website construction to realize the function of photo uploading using mobile camera