H5 calls the camera to take pictures and compress the pictures

This time I will bring you H5 to call the camera to take pictures and compress pictures. What are the precautions for H5 to call the camera to take pictures and compress pictures? The following is a practical case, let's take a look.

Organize the documents, search out an example code of H5 calling the camera to take pictures and compress the pictures, sort it out and streamline it a little for sharing.

Background

I recently made an h5 page. The main function is to call the camera to take pictures or select pictures from the album and compress the pictures to base64 and then upload them to the backend server. The server then returns the recognition results.

The main functional points of the front end are:

1. How to call the camera in H5

2. How to compress pictures

3. Picture to base64

H5 Call camera/album

The easiest way to call the camera is to use input file[camera ]

Properties:

<input type="file" capture=camera accept="image/*">//相机
<input type="file" accept="image/*">//相册

There is still a problem with the compatibility of this method. The camera can be opened normally on an iPhone, but after clicking on an Android phone, the camera, gallery, and file manager are displayed. and other mixed options. I searched a lot on the Internet but found no good solution, so I can only continue writing. . .

Image compression

Image compression requires

FileReader and .

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

is an

HTML element in which graphics can be drawn using scripts, and graphics and simple animations can be drawn.

Image compression requires compressing the resolution and quality of the image. For resolution compression, I set the maximum side of the image to 800, and the other side is scaled according to the original proportion of the image. You can also set the overall scaling ratio of the image.

var MAX_WH=800;
var image=new Image();
image.onload=function () {
  if(image.height > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.width *= MAX_WH/ image.height;
    image.height = MAX_WH;
  }
  if(image.width > MAX_WH) {
    // 宽度等比例缩放 *= 
    image.height *= MAX_WH/ image.width;
    image.width = MAX_WH;
  }
}
image.src=dataURL;//dataURL通过FileReader获取

Then there is the quality of the compressed image. The compression here is set to 80%. If the setting is too small, the image will be distorted. Dynamically create the tag and then compress the image:

var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);

Then upload it to the server and display the server results, but things are not that smooth. . . The picture is inexplicably rotated after being compressed when taking pictures on an iOS phone. Continue to solve the problem.

Solution to IOS image rotation

First quote exif.js and obtain the photo direction information through EXIF.getData and EXIF.getTag.

//file通过input标签获取
EXIF.getData(file,function(){
  orientation=EXIF.getTag(file,'Orientation');
});

The following gives the meaning of each orientation value corresponding to taking pictures with an iPhone:

##orientation368Get the picture After obtaining the direction information, the corresponding rotation operation is performed according to the obtained value.

Description
The iphone was shot horizontally, with the home button on the left, and the picture was rotated 180 degrees relative to the original position
The iphone is shot in portrait mode. At this time, the home button is at the bottom (the normal direction of holding the phone), and the picture can be rotated counterclockwise 90 degrees relative to the original position
The iphone is shot in portrait mode, with the home button at the top, and the picture is rotated 90 degrees clockwise relative to the original position

switch (orientation) {
  case 6:
  case 8:
    cvs.width = height;
    cvs.height = width;
    break;
}
var context=cvs.getContext("2d");
switch(orientation){
  //iphone横屏拍摄，此时home键在左侧
  case 3:
  // 180度向左旋转
  context.translate(width, height);
  context.rotate(Math.PI);
  break;
  //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
  case 6:
  context.rotate(0.5 * Math.PI);
  context.translate(0, -height);
  break;
  //iphone竖屏拍摄，此时home键在上方
  case 8:
  // 逆时针旋转90度
  context.rotate(-0.5 * Math.PI);
  context.translate(-width, 0);
  break;
}

Then I uploaded the picture again and found that the picture was normal under IOS.

The complete code is given below:

$('input[type=file]').change(function(e) {
  var file = this.files[0];
  var mime_type=file.type;
  var orientation=0;
  if (file && /^image\//i.test(file.type)) {
    EXIF.getData(file,function(){
      orientation=EXIF.getTag(file,'Orientation');
    });
    var reader = new FileReader();
    reader.onloadend = function () {
      var width,height;
      var MAX_WH=800;
      var image=new Image();
      image.onload=function () {
        if(image.height > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.width *= MAX_WH / image.height;
          image.height = MAX_WH;
        }
        if(image.width > MAX_WH) {
          // 宽度等比例缩放 *= 
          image.height *= MAX_WH / image.width;
          image.width = MAX_WH;
        }
        //压缩
        var quality=80;
        var cvs = document.createElement('canvas');
        cvs.width = width = image.width;
        cvs.height =height = image.height;
        switch (orientation) {
          case 6:
          case 8:
            cvs.width = height;
            cvs.height = width;
            break;
        }
        var context=cvs.getContext("2d");
        //解决ios图片旋转问题 
        switch(orientation){
          //iphone横屏拍摄，此时home键在左侧
          case 3:
          // 180度向左旋转
          context.translate(width, height);
          context.rotate(Math.PI);
          break;
          //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
          case 6:
          context.rotate(0.5 * Math.PI);
          context.translate(0, -height);
          break;
          //iphone竖屏拍摄，此时home键在上方
          case 8:
          // 逆时针旋转90度
          context.rotate(-0.5 * Math.PI);
          context.translate(-width, 0);
          break;
        }
        context.drawImage(image, 0, 0,image.width, image.height);
        dataURL = cvs.toDataURL('image/jpeg', quality/100);
        //获取识别结果
        ...
      }
      image.src=dataURL;
    };
    reader.readAsDataURL(file);
  }else{
    alert("只能识别图片！")
  }
});

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of History mode in H5

Localstorage and sessionstorage usage records

The above is the detailed content of H5 calls the camera to take pictures and compress the pictures. For more information, please follow other related articles on the PHP Chinese website!