À propos du code permettant à H5 d'appeler l'appareil photo pour prendre des photos et compresser les images

Cet article présente principalement l'exemple de code de H5 appelant l'appareil photo pour prendre des photos et compresser les images. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

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 ] Attribut :

<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. normalement sur l'iPhone, mais après avoir cliqué sur le téléphone Android, c'est un choix hybride d'appareil photo, de galerie, de gestionnaire de fichiers, etc. 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 des graphiques peuvent être dessinés à l'aide de scripts. Des graphiques et des animations simples peuvent être dessinés.

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. Le paramètre ici est de 80 % de compression. Si le paramètre est trop petit, l'image sera. déformé. 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, mais 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 caméra iphone :

orientation	描述
3	iphone横屏拍摄，此时home键在左侧，图片相对于原始位置旋转了180度
6	iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)，图片相对于原始位置逆时针旋转可90度
8	iphone竖屏拍摄，此时home键在上方，图片相对于原始位置顺时针旋转了90度

Après avoir obtenu les informations d'orientation de l'image, effectuez l'opération de rotation correspondante en fonction de 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é l'image et j'ai constaté que l'image é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("只能识别图片！")
  }
});

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile. à l'étude de tout le monde. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'analyse de contrôle des nouveaux attributs audio et vidéo du H5

Plusieurs photos H5 sous Angular How pour télécharger des photos

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!