About the code for H5 to call the camera to take pictures and compress the pictures

This article mainly introduces the example code of H5 calling the camera to take pictures and compress the pictures. The content is quite good. Now I will share it with you and give it as a reference.

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 will appear. , gallery, file manager and other hybrid 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 <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, but things don't go so smoothly. . . 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 is the meaning of each orientation value corresponding to taking pictures with an iPhone:

orientation	Description
#3	The iphone is shot horizontally, with the home button on the left , the picture is rotated 180 degrees relative to the original position
6	The iphone was shot vertically. At this time, the home button is below (the normal direction of holding the phone), and the picture is relatively Rotate counterclockwise from the original position to 90 degrees
8

## Degree

After obtaining the direction information of the image, perform the corresponding rotation operation based on 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 entire content of this article. I hope it will be helpful to everyone’s study. More related Please pay attention to the PHP Chinese website for content!
Related recommendations:

About the control analysis of H5 new attributes audio and video

Multiple H5 photos under Angular How to upload pictures

###############

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