Explication détaillée d'exemples sur la façon d'appeler l'appareil photo pour prendre des photos et compresser des images en HTML5

Cet article présente principalement l'exemple de code de H5 appelant l'appareil photo pour prendre des photos et compresser les images. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

Organisez les documents, recherchez un exemple de code H5 appelant l'appareil photo pour prendre des photos et compresser les images, trier et 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 fonctionnels du front end 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 de 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 propose des options mixtes comme la galerie, le gestionnaire de fichiers et plus encore. 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. La compression est ici réglée à 80 %. Si le réglage 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 les résultats du serveur. Cependant, les choses ne sont pas ainsi. lisse. . . 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 :

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

Après avoir obtenu les informations d'orientation du image, selon Effectuer les opérations de rotation correspondantes sur les valeurs obtenues.

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 est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!