How to call the camera to take pictures and compress pictures in H5

This time I will show you how to use H5 to call the camera to take pictures and compress pictures. How to use 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 the 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 photos to base64 and then upload to the backend server. The server then returns the recognition results.

The main function points of the front end are:

How to call the camera in H5

How to compress the image

Convert the image to base64

H5 calls the camera /Album

The easiest way to call the camera is to use the 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 an Android phone, there are mixed options such as camera, gallery, file manager, etc. 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. 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');
});

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;
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to implement H5 mobile phone scanning

##How to start realizing colorful ring countdown with SVG

How to perform cross-domain communication in html5

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