Perte des données EXIF quand upload de photos vers un serveur php

**Miyukaze** · 27/06/2012, 13h53

Bonjour à tous!
Je développe actuellement une application mobile en html5/jQuery Mobile.
Je souhaite gérer l'upload de photo depuis l'application vers un serveur php distant.
Pas de problème sur la théorie, mais je suis confronté à un problème plutôt contraignant.

En effet, j'upload mes photos via AJAX en JSON en me servant de l'API Phonegap. Le problème est que sur certains terminaux, les photos portraits sont enregistrées en mode paysage avec des données EXIF qui permettent de les afficher dans le bon sens. Or, pour uploader les photos, on les encode en base64, ce qui fait perdre les données EXIF.
Ainsi toutes les photos en mode portrait que j'upload se retrouvent de travers :/
Toute aide serait la bienvenue!
Je vous joint les bouts de code coté client et serveur. Merci beaucoup!

Client (HTML):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload Image</title>
 
<link rel="stylesheet" href="/jquery.mobile-1.0a1.min.css" /> 
 
<script type="text/javascript" charset="utf-8" src="phonegap-0.9.3.js"></script>
<script src="jquery-1.4.3.min.js"></script> 
<script src="jquery.mobile-1.0a1.min.js"></script>
 
 
</head>
 
<body>
    <p>
        <button onclick="getImage('camera');">Camera</button>
        <button onclick="getImage('library');">Library</button>
 
    </p>
</body>
</html>

Client (Javascript):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
                function getImage(src) {
 
                src = (src == 'library') ? Camera.PictureSourceType.PHOTOLIBRARY : Camera.PictureSourceType.CAMERA;
            // Retrieve image file location from specified source
            navigator.camera.getPicture(uploadPhoto, function(message) {
			alert('get picture failed');
		},{
			quality: 50, 
			destinationType: navigator.camera.DestinationType.FILE_URI,
			sourceType: src
		}
            );
 
        }
 
        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey="file";
            options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            options.mimeType="image/jpeg";
 
            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";
 
            options.params = params;
            options.chunkedMode = false;
 var id_session = localStorage.getItem("id_session");
            var ft = new FileTransfer();
            ft.upload(imageURI, "http://monsite.fr/www/upload_photo.php?id=" + id_session, win, fail, options);
        }
 
        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
            alert(r.response);
        }
 
        function fail(error) {
            alert("An error has occurred: Code = " + error.code);
        }

Serveur (PHP):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<?php
$id = $_GET["id"];
$new_image_name = "$id.jpg";
move_uploaded_file($_FILES["file"]["tmp_name"], "css/images/".$new_image_name);
$base = mysql_connect("host", "login", "mdp");  
mysql_select_db ('base', $base) ; 
$req3 =mysql_query("UPDATE member SET photo_profil='css/images/$new_image_name' WHERE id='$id'");
if (!$req3) {
die('Invalid query: ' . mysql_error());
}
?>

**PP(Team)** · 27/06/2012, 15h01

Bonjour,

Quelques liens qui pourraient t'aider :
http://docs.phonegap.com/en/1.0.0/ph...l#FileTransfer

http://wiki.phonegap.com/w/page/3953...20PHP%20Script

Cordialement.

**Miyukaze** · 27/06/2012, 16h42

Merci pour les liens =)
Malheureusement ils comptent parmi les sources dont je me suis servi pour développer et n'apportent pas je crois de réponse à mon problème.
J'ai fait pas mal de recherches apparemment je ne suis pas le seul dans ce cas, le problème touchant essentiellement des terminaux récents (notamment chez samsung).
Le code est donc à priori bon, le problème vient du fait que sur certains mobiles les images prises en mode portrait ne sont pas enregistrées sur le mobile comme tel, mais comme des images en mode paysage qui sont pivotées lors de l'affichage si le mobile lit qu'il faut effectuer une rotation dans les données EXIF de l'image.
La seule solution que je vois serait d'uploader les photos de façon à ce que cette rotation soit prise en compte.
La solution qui me parait le plus simple serait de lire les données EXIF en jquery AVANT l'upload et de faire pivoter la photo si besoin avant de l'encoder.
Une autre solution serait de réussir à faire passer les données EXIF en même temps que la photo lors de l'upload.
Mais je ne vois pas comment réaliser l'un ou l'autre.

EDIT: J'ai trouvé ce petit script sympatoche qui permet de lire les données EXIF en jquery mais malheureusement pas de les modifier, si jamais ca peut aider ^^
http://www.nihilogic.dk/labs/exifjquery/

**astuces72** · 29/05/2016, 10h25

hello

je sais que ce sujet date de 2012, mais je n'ai pas trouver réponse pour le même problème que toi Miyukaze !

j'utilise ce script:
http://www.y3dev.com/fr/redimensionn...-cas-pratique/
il fonctionne très bien depuis le pc, mais depuis un téléphone, le mode portrait s'enregistre en paysage.

Alors, as tu trouvé une solution ?
Merci

Perte des données EXIF quand upload de photos vers un serveur php

jQuery

Discussions similaires

Partager

Partager