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):
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 <!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>
Serveur (PHP):
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); }
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()); } ?>
Partager