H5 appelle l'appareil photo pour prendre des photos et compresser les images

Cette fois, je vous amènerai H5 pour appeler la caméra pour prendre une photo et compresser l'image. Quelles sont les précautions pour que H5 appelle la caméra pour prendre une photo et compresser l'image. est un cas pratique, jetons-y un coup d'œil.

Organisez les documents et trouvez un exemple de code H5 appelant l'appareil photo pour prendre des photos et compresser les photos. Je vais le trier et le rationaliser un peu pour le partage.

Contexte

J'ai récemment créé une page h5. La fonction principale est d'appeler l'appareil photo pour prendre des photos ou sélectionner des photos dans l'album et compresser les photos en base64 et. puis téléchargez-les sur le serveur backend. Le serveur renvoie ensuite les résultats de la reconnaissance.

Les principaux points de fonction du frontal sont :

1. Comment appeler la caméra en H5

2. Comment compresser images

3. Convertir l'image en base64

H5 appelle appareil photo/album

Le moyen le plus simple de appeler la caméra consiste à utiliser le fichier d'entrée[camera ]Attributs:

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

Il y a toujours un problème avec la compatibilité de cette méthode. La caméra peut être ouverte normalement sur un iPhone, mais. après avoir cliqué sur un téléphone Android, l'appareil photo, la galerie et les fichiers s'affichent. Le gestionnaire et d'autres options hybrides. J'ai beaucoup cherché sur Internet mais je n'ai trouvé aucune bonne solution, je ne peux donc que continuer à écrire. . .

Compression d'image

La compression d'image nécessite FileReader et <canvas>.

L'objet FileReader permet aux applications Web de lire de manière asynchrone le contenu des fichiers stockés sur l'ordinateur, en utilisant un objet File ou Blob pour spécifier le fichier ou les données à lire.

<canvas> est un élément HTML dans lequel vous pouvez utiliser des scripts pour dessiner des graphiques et des animations simples.

La compression d'image nécessite de compresser la résolution et la qualité de l'image. Pour la compression de résolution, je règle le côté maximum de l'image à 800, et l'autre côté est mis à l'échelle en fonction de la proportion originale de l'image. définissez également le rapport de mise à l’échelle global de l’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获取

Ensuite, il y a la qualité de l'image compressée. La compression est ici réglée à 80%. Si le paramètre est trop petit, l'image sera déformée. Créez dynamiquement la balise <canvas> puis compressez l'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);

Téléchargez-la ensuite sur le serveur et affichez le résultat du serveur. Cependant, les choses ne sont pas si fluides. . . L'image pivote inexplicablement après avoir été compressée lors de la prise de photos sur un téléphone iOS. Continuez à résoudre le problème.

Résoudre la rotation des images IOS

Citez d'abord exif.js et obtenez les informations de direction de la photo via EXIF.getData et EXIF.getTag.

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

Ce qui suit donne la signification de chaque valeur d'orientation correspondant à la prise de photos avec iPhone :

Après avoir obtenu les informations d'orientation de l'image, effectuez l'opération de rotation correspondante selon la valeur obtenue.

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

Ensuite, j'ai téléchargé la photo et j'ai constaté que la photo était normale sous IOS.

Le code complet est donné ci-dessous :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation du mode Historique dans H5

Enregistrements d'utilisation du stockage local et du stockage de session

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!