Detailed explanation of examples of how to call the camera to take pictures and compress images in HTML5

This article mainly introduces the example code of H5 calling the camera to take pictures and compress the pictures. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to 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 ] Attribute:

<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 the iPhone, but after clicking on the Android phone, the camera, gallery, Mixed options like file manager. 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 <canvas>.

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.

<canvas> is an HTML element in which graphics can be drawn using scripts. 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 <canvas> 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's results. However, 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 the iphone camera:

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

After obtaining the direction information of the image, perform the corresponding rotation operation according to the obtained value.

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 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("只能识别图片！")
  }
});

The above is the detailed content of Detailed explanation of examples of how to call the camera to take pictures and compress images in HTML5. For more information, please follow other related articles on the PHP Chinese website!