Comment utiliser JS pour faire pivoter l'aperçu de la photo IOS prise de 90 degrés

Cette fois, je vais vous montrer comment utiliser JS pour faire pivoter l'aperçu de la photo IOS prise de 90 degrés. Quelles sont les précautions pour faire pivoter l'aperçu de la photo IOS prise de 90 degrés. en utilisant JS Ce qui suit est un cas pratique, jetons un coup d'œil.

Pour résoudre ce problème, vous devez introduire une bibliothèque JS tierce : exif.js Adresse de téléchargement : https://github.com/exif-js/exif-js Grâce à exif.js, nous pouvons obtenir les méta-informations de l'image, qui incluent la direction dans laquelle la photo a été prise.

L'attribut photo direction donné par exif.js est utilisé dans IOS pour obtenir la direction de l'image photographiée via exif.js. La valeur renvoyée est 6, ce qui est le cas du F le plus à gauche dans l'image ci-dessus. . C'est là que réside notre bug. Par conséquent, nous effectuons le traitement correspondant en jugeant la valeur de la direction. Si la valeur est 6, nous effectuons une correction de rotation sur l'image.

Le code spécifique est le suivant :

//获取图片方向
function getPhotoOrientation(img) {
   var orient;
   EXIF.getData(img, function () {
      orient = EXIF.getTag(this, 'Orientation');
   });
   return orient;
}

Ensuite, nous modifions la fonction de compression dans l'article précédent comme suit :

//图片压缩
function compress(img, width, height, ratio) {
   var canvas, ctx, img64, orient;
    
   //获取图片方向
   orient = getPhotoOrientation(img);
   canvas = document.createElement('canvas');
   canvas.width = width;
   canvas.height = height;
   ctx = canvas.getContext("2d");
   //如果图片方向等于6 ，则旋转矫正，反之则不做处理
   if (orient == 6) {
      ctx.save();
      ctx.translate(width / 2, height / 2);
      ctx.rotate(90 * Math.PI / 180);
      ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
      ctx.restore();
   } else {
      ctx.drawImage(img, 0, 0, width, height);
   }
   img64 = canvas.toDataURL("image/jpeg", ratio);
   return img64;
}

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 :

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!