H5 calls the camera to take pictures and compress the example code of the picture

Organize the document, search for an instance code for H5 to call the camera to take pictures and compress the picture, and sort out and streamline it.

Recently, I want to make a H5 page. The main function is to call the camera to take pictures or the album selection and compress the photo to Base64 to the background server, and then the server returns the identification result.

The main function points of the front end are:

1. How to call the camera
2. How to compress the picture
3. Picture to base64

The easiest way to call the camera is to use the Input File [Camera] property:

 <input type = file capture = carera accept = image/*> // Camera <input type = file accept = image/*> // Album

This method compatibility is still problematic. You can open the camera normally on the iPhone mobile phone, but after clicking on the Android mobile phone, you have a mixed selection item such as the camera, gallery, file manager. I searched a lot of good solutions on the Internet, and I could only continue to write down. Essence Essence

The picture compression is used to use FileReader and <canvas> .

The FileReader object allows Web applications to read the contents of the file stored on the computer asynchronously, and use the File or Blob object to specify the file or data you want to read.

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

The picture compression should compress the resolution and quality of the picture. The resolution is compressed. I set the maximum side of the picture 800. On the other hand, according to the original proportion of the picture, you can also set the overall scaling ratio of the picture.

 Var max_wh = 800; var image = new image (); Image.onload = function () {if (image.height> max_wh) {// Width is zoomed in *= image.width *= mAX_WH/ Ima. Ge.head; Image .height = max_wh;} if (Image.width> max_wh) {// Width and other proportions of zooming *= image.height *= max_wh/ image.width; image.width = max_wh; .src = dataurl; // DataURL obtained through FileRereader

Then there is the quality of compressing the picture. The settings are compressed by 80%. If you set too small pictures, it will be distorted. Dynamically create a <canvas> tag and then compress the picture:

 var Quality = 80; var cvs = document.createElement ('canvas'); cvs.width = Image.width; cvs.head = Image.Height; VAR Context = CVS.GetContext (2D); Context.DrawImage (Image, 0 , 0, Image.Width, Image.Height); DataUrl = cvs.todataurl ('Image/JPEG', Quality/100);

Then the result of uploading to the server and displaying the server, but things are not so smooth. Essence Essence After the iOS mobile phone is compressed, the picture is inexplicably rotated and continues to solve the problem.

First quote EXIF.JS, and obtain the photo direction information through ExiF.GetData and exif.gettg.

 // FILE obtain exif.getdata (file, function () {Orientation = exif.gettg (file, 'Orientation');});

The meaning of each Orientation value corresponds to the iPhone mobile phone to take pictures:

 Switch (Orientation) {case 6: case 8: cvs.width = height; cvs.head = width; break;} Var context = cvs.getContext (2D); Switch (Orientation) { / / / /iPhone horizontal screen shooting, at this time HOME keys on the left case 3: // 180 degrees to the left rotate Context.translate (width, height); context.rotate (math.pi); break; // iphone vertical screen shooting, at this time (normal Take 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 key is case 8: // inverse Time clockwise rotating 90 degrees context.rotate (-0.5 * math.pi); context.translate (-width, 0); break;}

Then upload the picture and find that the picture under iOS is normal.

The complete code is given below:

 $ ('input [type = file]'). Change (function (e) {var file = this.files [0]; varmed_type = file.type; var Orientation = 0; if (file &&/^image /// /I.Test (File.type) {exif.getdata (file, function () {Orientation = exif.gettag (file, 'Orientation');}); oadend = function () () {var width, height; var max_wh = 800; var image = new image (); image.onload = function () {if (iMage.height> max_wh) {// width and other proportions are zoomed in*= image .width * = Max_Wh / Image.head; Image.head = max_wh;} if (images.width> max_wh) {// Width and other proportions are zoomed *= image.height *= max_wh / image.width; Age.width = max_wh;} / /Compressed varging = 80; var cvs = document.createElement ('canvas'); cvs.width = width = Image.width; cvs.head = Image.head; ch (Orientation) {case 6: case 8: cvs.width = height; cvs.height = width; break;} Var context = cvs.getContext (2D); // Solve iOS picture rotation problem switch (Orientation) {// iPhone horizontal screen shooting, at this time Home Keys on the left Case 3: // 180 degrees to the left rotate connected.translate (width, height); context.rotate (math.pi); break; // iphone vertical screen shooting, at this time the home button is below (normal mobile phone direction takes the phone direction of the phone. ) case 6: context.rotate (0.5 * math.pi); context.translate (0, -height); break; // iPhone vertical screen shooting, at this time the home key rotates 90 degrees against the clockwise counterclockwise context.rotate (-0.5 * math.pi); context.translate (-width, 0); Break;} context.drawimage (image, 0, 0, image.width, Image.Height); CVS.TODAURL ( 'Image/jpeg', question/100); // Get the recognition result ...} Image.src = DataUrl;}; Reader.readasdataurl (File);} Else {Alert (can only identify pictures! )}});

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.