Comment appeler l'appareil photo pour prendre des photos et compresser des images dans H5

Cette fois, je vais vous montrer comment utiliser H5 pour appeler l'appareil photo pour prendre des photos et compresser des images Comment utiliser H5 pour appeler l'appareil photo pour prendre des photos et compresser des images ? Quelles sont les précautions pour que H5 appelle l'appareil photo pour prendre des photos et compresser les images Ce qui suit est un cas pratique, jetons un coup d'œil ?

Organisez les documents, recherchez un exemple de code H5 appelant l'appareil photo pour prendre des photos et compresser les images, triez-le et rationalisez-le 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 de sélectionner des photos dans l'album et de compresser les photos en base64 puis de télécharger<.> au serveur backend. Le serveur renvoie ensuite les résultats de la reconnaissance.

Les principaux points fonctionnels du front end sont :

Comment appeler la caméra en H5

Comment compresser les images

Convertir les images en base64

H5 pour appeler la caméra /Album

La façon la plus simple d'appeler la caméra est d'utiliser l'attribut input file[camera] :

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

Cette méthode a toujours une compatibilité problèmes Vous pouvez ouvrir l'appareil photo normalement sur un iPhone, mais après avoir cliqué sur un téléphone Android, il existe des options mixtes telles que l'appareil photo, la galerie, le 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 .

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.

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 paramètre est trop petit, l'image sera déformée. Créez dynamiquement la balise 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 sur la direction de la photo via EXIF.getData et EXIF.getTag.

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

Après avoir obtenu les informations de direction 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;
}

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment mettre en œuvre la numérisation d'un téléphone mobile H5

Comment démarrer un compte à rebours coloré avec SVG

Comment effectuer une communication inter-domaines en html5

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!