Perte des données EXIF quand upload de photos vers un serveur php
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:
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:
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:
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());
}
?> |
