HTML5 call phone camera to take pictures

Front-end call phone camera photo

There are two common ways of implementing this:

One is to capture the image in video by capturing the stream of video through the video control,

Another is to use the Input[file] control to invoke the camera on the mobile side to achieve a picture.

Both methods have pros and cons, the first can be implemented to the photo screen rewrite (such as the addition of a photo screen mask layer cue box, etc.)

However, the first approach is incompatible in the iphone environment and cannot be used.

The second is actually called input[type= ' file ', which pops up a selection box to let the user choose whether to call the camera or call the album,

The advantage is that the compatibility is better than the previous one, the bad place is that this method can not control the photo, want to achieve on the mobile side can only take pictures can not select photos or the photo interface to add a boot mask layer method is not feasible.

Here's how the second approach is implemented:

First, add an input control to the page to implement the call camera.

<id= "takepicture"  type= "file"  accept= "image/*"  capture= "Camera"  style= "Display:none">

To customize the way the camera is called:

var function () {    var takepicture = document.getElementById (' takepicture ');    ...//Add code to be processed    takepicture.click ();}

Then add the onchange event to this input in JS and listen for the stream of photos after the photo is taken.

1 //Monitor photo shoot and get photo stream2 varTakepicture = document.getElementById (' takepicture '));3 varTakepictureurl =function () {4Takepicture.onchange =function(event) {5         varFiles =event.target.files, file;6         if(Files && files.length > 0) {7File = Files[0];8             Try {9                 varURL = window. URL | |Window.webkiturl;Ten                 varBlob =url.createobjecturl (file); Get a photo of a file stream One compresspicture (BLOB); Compress photos A             } -             Catch(e) { -                 Try { the                     varFileReader =NewFileReader (); -Filereader.onload =function(Event) {//Get base64 encoding of photos - compresspicture (Event.target.result); Compress photos -                     }; + filereader.readasdataurl (file); -                 } +                 Catch(e) { AAlert (common. MESSAGE.title.error, ' photo failed, please contact customer service or try to change your phone and try again! '); at                 } -             } -         }
 -     } -}();

In this onchange method, two ways to capture the user's photos after the photo, the first is to capture the photo of the file stream (there are some compatibility issues), if the first way is incompatible with the second way to obtain the base64 encoding of the photo (this way compatibility is higher), insurance, Both methods are used.

Above, completed the front-end call camera and take pictures of the function.

Front-end photo compression processing

There is no good solution for photo compression on the front end. There are currently two APIs through canvas to achieve compression processing of photos.

Implementation code:

HTML5 call phone camera to take pictures