H5 method How to call the camera and compress the picture

Small premises to share the H5 method how to call the camera to take pictures and compress the picture, I believe that most people don’t know much, so share this article to everyone, I hope everyone is reading this article. Harvest, let us let us know together!

Organize the document, searching out a H5 call camera to take a photo and compress the instance code of the picture, and slightly sort out the thinning.

Recently, I have to do a H6 page. The main function is to call the camera to take pictures or to upload the photo to the background server after the photo is compressed by Base64, and then the server returns the identification result.

H5 how to call camera

How picture is compressed

picture transfer base64

H5 call camera / Photo album

The easiest way to call the camera is to use the Input file [Camera] attribute:
   // Camera  // Photo 册  

This kind of method is still problematic, and the camera can be opened normally on the iPhone phone, but after clicking on the Android phone, it is a mixed selection item such as the camera, gallery, and file manager. I have a lot of good solutions on the Internet, I can only write down. . .

Picture Compression

Picture compression is used to use FileReader and


The FileReader object allows the web application to read the contents of the file stored on the computer, specify the file or data to be read using the file or blob object.

is an HTML element that can use scripts to draw graphics, which can draw graphics and simple animations.

Picture Compression To compress the resolution and quality of the picture, the resolution is compressed. I am setting up the maximum side of the picture is 800, and the other side is scaled according to the picture, or the picture is equipped with a total scaled scale.

 VAR MAX_WH = 800; var image = new image (); image.onload = function () {if (image.Height> max_wh) {// width equivalent proportion * = image.width * = max_wh / image. Height; image.height = max_wh;} if (image.width> max_wh) {// width isometric scale zoom * = image.height * = max_wh / image.width; image.width = max_wh;}} image.src = dataURL // DataURL Get   
through FileReader, then the quality of the compressed picture, the setting is compressed by 80%, if the setting too small picture is distorted. Dynamically created

tag and then compresses the picture:

 VAR Quality = 80; var cvs = document.createElement ('canvas'); cvs.width = image.width; cvs.heigh = image.height; var context = cvs.getContext ("2D"); context.drawImage (image, image, image.height); dataURL = CVS.TODATAURL ('Image / JPEG', Quality / 100);   
Then it is uploaded to the server and display the result of the server, but things are not so smooth. . . After the iOS mobile phone takes a photo compression, the picture is inexplicably rotated, and the problem will continue to solve the problem.

Solve IOS picture rotation

First reference EXIF.JS, get the photo direction information via EXIF.GETDATA and EXIF.GETTAG.

// File acquires exiF.getdata (file, function () {orientation = exifth (file, ‘orientation “;});
   After acquiring the direction information of the picture, the corresponding rotation operation is based on the obtained value. 
Switch (orientation) {case 6: Case 8: case 8: cvs.width = height; cvs.height = width; break;} var context = cvs.getcontext (“2D”); Switch (orientation) {// iphone horizontal screen shooting, at this time, the HOME button is rotated to left Case 3: // 180 degrees to left CONTEXT.TRANSLATE (Width, Height); context.Rotate (Math.pi); Break; / / iphone vertical screen shooting, at this time, the HOME button is below (the direction of the mobile phone) Case 6: context.Rotate (0.5 * math.pi); context.translate (0, -HEIGHT); Break; // iphone vertical screen Shooting, at this time, the home button rotates 90 degrees at the top 8: // counterclockwise 90 degree (-0.5 * math.pi); context.translate (-width, 0); Break;}

The above is how the H5 method calls the camera and compresses all the contents of the picture, thank you for reading! I believe everyone has a certain understanding, I hope to share the content of everyone, if you want to learn more knowledge, please pay attention to Tumi Yun Industry News Channel!                      
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment