Comment prévenir l'auto-rotation des images sur iOS sur HTML avec CSS/Javascript
Je suis entrain de créer un site photo - j'ai téléchargé une photo de moi qui est en fait incorrecte orienté (l'image est pivotée de 90 degrés dans le sens antihoraire). J'ai téléchargé cette image à partir de mon iPhone, ce qui apparemment a l'image stocké de cette façon sur le but.
Sur mon site, la page HTML a rendu un objet JSON qui contient l'URL de la photo ainsi que les dimensions de l'image. Je suis à l'aide de jQuery mobile et onload de la page, j'ai mis un lien sur la page, et lorsque vous cliquez sur la photo il affiche la photo dans une fenêtre contextuelle. Le popup rend un <img>
tag avec des dimensions qui sont suffisamment petits pour ajuster l'image à l'intérieur de la fenêtre d'affichage en cours de la largeur/hauteur. Il calcule les dimensions à l'aide de l'JSON je l'ai mentionné précédemment, et les résultats de $(window).width()
et $(window).height()
.
Sur le bureau - la photo affiche correctement dans le mauvais sens (parce que c'est la façon dont la photo est en fait stockée).
Sur iPad & iPhone - la photo est de l'auto-rotation de sorte que la photo est correctement orienté, mais les dimensions sont toutes erronées, la photo est tout étiré et déformé.
Je voudrais savoir les suivantes:
- Est-ce une caractéristique de navigateurs sur iOS ou sur d'autres appareils?
- Est-il un moyen de désactiver cette fonctionnalité à l'aide de CSS ou de Javascript?
- Est-il un moyen de détecter qu'il s'est passé et de corriger les dimensions de la
<img>
tag? Je n'ai pas l'esprit que la photo de l'orientation a été corrigé par le navigateur, je veux juste les dimensions appropriées.
MODIFICATIONS
Rendre le Titre plus dans la forme d'une question - Aussi de reformuler la question pour être plus direct
PLUS DES MODIFICATIONS
Ici est un JS Fiddle avec un exemple: http://jsfiddle.net/5JKgn/
Si vous cliquez sur le lien sur un ordinateur de bureau, la fenêtre contextuelle affiche l'image mal orienté. Si vous cliquez sur le lien sur un iPhone ou un iPad, le popup montre l'image correctement orienté, mais les dimensions sont erronées, la photo est tendu.
Dans le réel scénario, le JSON est rendue par le code PHP qui peut lire l'image et sorties de la largeur la hauteur de ce qu'il obtient à l'aide de getimagesize()
Qui pourrait être acceptable - mais s'il vous plaît prendre un coup d'oeil à la violon - je veux le popup pour afficher l'image centrée dans la fenêtre d'affichage et la photo redimensionnée afin qu'il soit visible de n'importe quelle taille de votre écran (c'est à dire vraiment petit sur un iphone)
Découvrez ma réponse ci-dessous, est-ce que vous êtes après, ou ai-je raté quelque chose? Je suis heureux de le mettre à jour si nécessaire.
Sur la photo de stockage de code que j'ai fait avant, nous avons utilisé les données EXIF de corriger l'orientation de la photo, que ce soit avant de le ranger ou au moment de servir, il est revenu. Est-il une raison pour laquelle vous ne voulez pas le faire?
J'ai parlé avec le client (photographe) - et ils sont las de l'utilisation des données EXIF pour corriger la photo - elle dit qu'elle prend des photos, parfois à d'étranges angles sur le but (artistique) et ne veux pas le fichier qui doit être changé sans elle explicite photoshop éditions.
OriginalL'auteur codefactor | 2014-01-18
Vous devez vous connecter pour publier un commentaire.
À formaliser mes commentaires - peut-être vous pouvez simplement pas de côté la question:
Si vous n'avez pas besoin de stocker exacte des originaux, vous pouvez faire pivoter les données lors du stockage/récupération de l'image.
Ou, comme l'OP a noté dans sa réponse, il suffit de retirer le tag EXIF, et les navigateurs ne vont plus être en mesure de l'utiliser pour la "fixation" de l'orientation.
(p.s. Toujours n'oubliez pas de demander "pourquoi" assez de temps pour comprendre ce problème, vous êtes en train d'essayer de résoudre :D)
Je ne suis pas un PHP gars moi-même, mais question et question avait l'air prometteur. Si vous travaillez sur des fichiers existants et ne veulent pas les modifier pour chaque demande, vous devez réenregistrer chaque fichier après peaufiner les EXIF. Toutefois, si vous permettre aux utilisateurs de télécharger leurs originaux (par opposition à simplement montrer une galerie), vous pouvez avoir besoin de couper l'étiquette sur chaque demande (ou de faire une copie d'archives de chaque fichier pour servir des originaux).
Le client veut être en mesure de télécharger des images via FTP ou par le biais de l'interface web, afin que les fichiers seront stockés comme des originaux. Mais peut-être la requête pour aller chercher l'image à la bande.
OriginalL'auteur brichins
OK je vais essayer de répondre à ça:
Oui, c'est sur le but iOS magasins de l'écran-l'orientation dans les données EXIF (parmi les choses comme la résolution, la vitesse d'obturation, de GPS, etc.) mais enregistre les données d'image de l'appareil-orientation.
Pour plus d'info sur EXIF voir Wikipédia.
Pas que je sache.
Oui, vous devriez être en mesure d'accéder à des données EXIF et de déterminer l'orientation et les dimensions.
N ° 3 a besoin d'un peu plus d'explication:
Vous pouvez utiliser une bibliothèque comme cette une pour accéder aux données EXIF de javascript (comprend plugin jQuery).
L'Orientation de la Balise est définie comme:
0x0112 : "Orientation"
et stocké sous la forme d'un nombre.À l'aide de cette information, vous pouvez déterminer l'orientation:
Qui devrait vous permettre de vous au moins swap largeur /hauteur pour votre
<img>
si besoin.Veuillez noter que les données EXIF comprend également la largeur et la hauteur de sorte que si elles diffèrent de ce que vous pensez qu'ils devraient être, qui pourrait également aider à identifier les problèmes de rotation.
Voici un JS fiddle si vous voulez essayer de résoudre ce problème à l'aide de Javascript: jsfiddle.net/5JKgn
C'est utile - je pense que je peux le consulter à l'aide de
exif_read_data
en php et de corriger la photo.OriginalL'auteur Shirkrin
Vous n'avez pas besoin de nous le Javascript pour définir explicitement la hauteur/largeur de l'image à charger. Enlever la partie de votre script qui est de l'insertion de ces inline hauteur/largeur de styles et il suffit d'ajouter les lignes suivantes à votre feuille de style:
Voici une mise à jour de Violon
Aussi, je voudrais idéalement comme sur la photo pour avoir la bonne orientation sur le bureau.
On dirait le bouton X de problème et le popup hauteur problème se produit uniquement sur le bureau lorsque l'écran est plus large que haute.
parce que l'image prend une seconde à la charge, les dimensions ne sont pas connues lorsque la fenêtre contextuelle s'affiche, de sorte que le popup ne s'ouvre pas centré sur la fenêtre d'affichage. (faire l'expérience de cette assurez-vous de vider votre cache et essayez à nouveau)
La correction de l'orientation sur le bureau je ne peux pas aider ya avec. Savez-vous ce que vous voulez le maximum de largeur pour être sur le bureau?
OriginalL'auteur monners
Utiliser les media queries pour les navigateurs de bureau et de l'ensemble de la css pour les images à 100% de la hauteur et de la largeur auto.
Vous pouvez même envisager à l'aide de ces variables au lieu de calculer pour le site mobile
OriginalL'auteur rootsup