How to call the camera to take pictures and compress pictures in H5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

php中世界最好的语言

Jan 12, 2018 am 09:22 AM

html5 compression Photograph

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/*">//相册

Copy after login

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.

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获取

Copy after login

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

var quality=80;
var cvs = document.createElement(&#39;canvas&#39;);
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(&#39;image/jpeg&#39;, quality/100);

Copy after login

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,&#39;Orientation&#39;);
});

Copy after login

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

Copy after login

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!