JS Côté Client, l'Orientation Exif: Rotation et Miroir des Images JPEG

Mederr du contexte de transformation fonctionne parfaitement. Si vous avez besoin d'extraire de l'orientation utilisez uniquement cette fonction - vous n'avez pas besoin de tout EXIF-lecture libs. Ci-dessous est une fonction de re-réglage de l'orientation en base64 de l'image.
Voici un violon pour elle. J'ai également préparé un jouer avec l'orientation de l'extraction de démonstration.

function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();    
img.onload = function() {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
//set proper canvas dimensions before transform & export
if (4 < srcOrientation && srcOrientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
//transform context before drawing image
switch (srcOrientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
//draw image
ctx.drawImage(img, 0, 0);
//export base64
callback(canvas.toDataURL());
};
img.src = srcBase64;
};

ok en plus de @user3096626 de la réponse, je pense que cela sera plus utile si quelqu'un a le code fourni par l'exemple, l'exemple suivant va vous montrer comment résoudre orientation d'image vient de l'url (images à distance):

---

Solution 1: utilisation de javascript (recommandé)

1. parce que charge de l'image de bibliothèque n'a pas d'extraire les données exif à partir de l'url des images uniquement (fichier/blob), nous allons utiliser les deux exif-js et charge-image bibliothèques javascript, donc tout d'abord ajouter ces bibliothèques à votre page que le suivi:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.1.0/exif.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-scale.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.12.2/load-image-orientation.min.js"></script>

   Note la version 2.2 de l'exif-js semble avoir des problèmes, donc nous avons utilisé 2.1

2. puis, fondamentalement, ce que nous allons faire est de

   a - charger l'image à l'aide de window.loadImage()

   b - lire les exif des étiquettes à l'aide de window.EXIF.getData()

   c - convertir l'image sur la toile et de fixer l'orientation d'image à l'aide de window.loadImage.scale()

   d - place de la toile dans le document

ici, vous allez 🙂

window.loadImage("/your-image.jpg", function (img) {
if (img.type === "error") {
console.log("couldn't load image:", img);
} else {
window.EXIF.getData(img, function () {
var orientation = EXIF.getTag(this, "Orientation");
var canvas = window.loadImage.scale(img, {orientation: orientation || 0, canvas: true});
document.getElementById("container").appendChild(canvas); 
//or using jquery $("#container").append(canvas);
});
}
});

bien sûr, vous pouvez également obtenir l'image en base64 de la toile de l'objet et de le placer dans le img src attribut, donc, à l'aide de jQuery que vous pouvez faire 😉

$("#my-image").attr("src",canvas.toDataURL());

voici le code complet sur: github: https://github.com/digital-flowers/loadimage-exif-example

---

Solution 2: à l'aide de html (navigateur hack)

il est très rapide et facile hack, la plupart des navigateurs d'afficher l'image dans la bonne orientation si l'image s'ouvre dans un nouvelle onglet directement, sans aucun html (LOL je ne sais pas pourquoi), donc, fondamentalement, vous pouvez afficher votre image à l'aide d'une iframe en mettant l'attribut src de l'iframe que l'url de l'image directement:

<iframe src="/my-image.jpg"></iframe>

---

Solution 3: à l'aide de css (seulement firefox & safari sur ios)

il est css3 attribut de fixer l'image de l'orientation, mais le problème, il ne fonctionne que sur firefox et safari/ios, il est toujours utile de le mentionner car bientôt il sera disponible pour tous les navigateurs (Browser support info de caniuse)

img {
image-orientation: from-image;
}

WunderBart réponse était le meilleur pour moi. Notez que vous pouvez l'accélérer beaucoup si vos images sont souvent le droit chemin, tout simplement en testant l'orientation première et en contournant le reste du code, si pas de rotation est nécessaire.

En mettant toutes les infos de wunderbart ensemble, quelque chose comme cela;

var handleTakePhoto = function () {
let fileInput: HTMLInputElement = <HTMLInputElement>document.getElementById('photoInput');
fileInput.addEventListener('change', (e: any) => handleInputUpdated(fileInput, e.target.files));
fileInput.click();
}
var handleInputUpdated = function (fileInput: HTMLInputElement, fileList) {
let file = null;
if (fileList.length > 0 && fileList[0].type.match(/^image\//)) {
isLoading(true);
file = fileList[0];
getOrientation(file, function (orientation) {
if (orientation == 1) {
imageBinary(URL.createObjectURL(file));
isLoading(false);
}
else 
{
resetOrientation(URL.createObjectURL(file), orientation, function (resetBase64Image) {
imageBinary(resetBase64Image);
isLoading(false);
});
}
});
}
fileInput.removeEventListener('change');
}
//from http://stackoverflow.com/a/32490603
export function getOrientation(file, callback) {
var reader = new FileReader();
reader.onload = function (event: any) {
var view = new DataView(event.target.result);
if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
var length = view.byteLength,
offset = 2;
while (offset < length) {
var marker = view.getUint16(offset, false);
offset += 2;
if (marker == 0xFFE1) {
if (view.getUint32(offset += 2, false) != 0x45786966) {
return callback(-1);
}
var little = view.getUint16(offset += 6, false) == 0x4949;
offset += view.getUint32(offset + 4, little);
var tags = view.getUint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
if (view.getUint16(offset + (i * 12), little) == 0x0112)
return callback(view.getUint16(offset + (i * 12) + 8, little));
}
else if ((marker & 0xFF00) != 0xFF00) break;
else offset += view.getUint16(offset, false);
}
return callback(-1);
};
reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};
export function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();
img.onload = function () {
var width = img.width,
height = img.height,
canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
//set proper canvas dimensions before transform & export
if (4 < srcOrientation && srcOrientation < 9) {
canvas.width = height;
canvas.height = width;
} else {
canvas.width = width;
canvas.height = height;
}
//transform context before drawing image
switch (srcOrientation) {
case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
case 7: ctx.transform(0, -1, -1, 0, height, width); break;
case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
default: break;
}
//draw image
ctx.drawImage(img, 0, 0);
//export base64
callback(canvas.toDataURL());
};
img.src = srcBase64;
}

Je suis en utilisant la solution mixte (php+css).

Conteneurs sont nécessaires pour:

• div.imgCont2 contenant nécessaire pour le faire tourner;
• div.imgCont1 conteneur nécessaires pour zoomOut - width:150%;
• div.imgCont conteneur nécessaires pour les barres de défilement lorsque l'image est zoomOut.

.

<?php
$image_url = 'your image url.jpg';
$exif = @exif_read_data($image_url,0,true);
$orientation = @$exif['IFD0']['Orientation'];
?>
<style>
.imgCont{
width:100%;
overflow:auto;
}
.imgCont2[data-orientation="8"]{
transform:rotate(270deg);
margin:15% 0;
}
.imgCont2[data-orientation="6"]{
transform:rotate(90deg);
margin:15% 0;
}
.imgCont2[data-orientation="3"]{
transform:rotate(180deg);
}
img{
width:100%;
}
</style>
<div class="imgCont">
<div class="imgCont1">
<div class="imgCont2" data-orientation="<?php echo($orientation) ?>">
<img src="<?php echo($image_url) ?>">
</div>
</div>
</div>

J'ai écrit un petit script php qui fait pivoter l'image. Assurez-vous de stocker l'image en faveur de seulement recalculer à chaque demande.

<?php
header("Content-type: image/jpeg");
$img = 'IMG URL';
$exif = @exif_read_data($img,0,true);
$orientation = @$exif['IFD0']['Orientation'];
if($orientation == 7 || $orientation == 8) {
$degrees = 90;
} elseif($orientation == 5 || $orientation == 6) {
$degrees = 270;
} elseif($orientation == 3 || $orientation == 4) {
$degrees = 180;
} else {
$degrees = 0;
}
$rotate = imagerotate(imagecreatefromjpeg($img), $degrees, 0);
imagejpeg($rotate);
imagedestroy($rotate);
?>

Acclamations