Comment: With the support of HTML5 specifications, it has become possible for WebApp to take photos on mobile phones. Below, I will explain how Web App takes photos with your mobile phone, displays them on the page and uploads them to the server
1. Video streaming
HTML5 The Media Capture API provides programmable access to the camera, and users 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 get the video from the camera as the input source for this tag (note that only Chrome and Opera currently support getUserMedia).
<videoidvideoid=videoautoplay="></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 streaming
2. Take photos
For photo shooting function, we use HTML5 Canvas to capture the content of Video tags in real time, and Video elements can be used as input to Canvas images, which is great. The main code is as follows:
JavaScript Code 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. Picture acquisition
Next, we want to obtain image data from Canvas. The core idea is to use canvas' toDataURL to convert Canvas' data into base64-bit encoded PNG images, similar to the format of data:image/png;base64,xxxxx.
var imgData=canvas.toDataURL(image/png);
Because the real image data is the part after the base64 encoded comma, the image data processed by our actual server should be this part, and we can obtain it in two ways.
The first type is to intercept 22-bit strings as image data on the front end, for example:
var data=imgData.substr(22);
If you want to get the size of the image before uploading, you can use:
var length=atob(data).length;//atobdecodesastringofdatawhichhasbeenencodedusingbase-64encoding
The second type is to obtain the transmitted data on the backend and intercept the 22-bit string in the background language. For example, in PHP:
$image=base64_decode(str_replace('data:image/jpeg;base64, ',,$data);
4. Upload pictures
On the front end, you can use Ajax to upload the image data obtained above to the background script. For example when using jQuery:
$.post('upload.php ',{'data ':data});
In the background we use PHP scripts to receive data and store it as pictures.
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 can not only be used for web app photo upload, but also you can convert Canvas output into image upload. In this way, you can use Canvas to provide users with picture editing, such as cropping, coloring, and graffiti artboard functions, and then save the user's edited pictures to the server.