fonction pour détecter et orienter une photo en fonction d'une prise de vue

Version imprimable

25/09/2017, 18h24
toulousain3117

fonction pour détecter et orienter une photo en fonction d'une prise de vue

bonjour

Existe t'il une fonction qui permet de détecter la prise de vue d'une image et la redresser en fonction de son orientation ?
25/09/2017, 18h53
sabotage

Il existe des algorithmes qui tente de faire ça oui.
Tu as déjà fait une recherche ?
25/09/2017, 20h09
toulousain3117

Oui j'ai fait des recherches (je fais toujours des recherches avant de posté ici) mais ce que j'ai trouvé les topics sont en anglais
25/09/2017, 21h00
sabotage
Que veux-tu exactement faire ?
S'il s'agit juste de connaitre l'orientation de l'appareil lors de la prise :
Code:

1 2 $exif = exif_read_data($fichier); echo $exif[‘Orientation’];
S'il s'agit de trouver l'orientation d'après le contenu de l'image, la c'est une autre pair de manches.
25/09/2017, 21h10
toulousain3117

j'ai vue sur mon site un membre avait charger une photo et la photo était en paysage, donc on voit la voit couché y compris le profil de la personne qui est donc incliné de 90degres

ce que je souhaite faire c’est détecte ce cas

c'est à dire si on voit la photo correctement on fait rien si la photo a besoin d'une rotation dans ce cas on la tourne pour mettre dans le bon sens

j'ai donc éssayé ton code même ceux que j'ai pu trouver sur le net mais cela ne m'affiche rien :
Code:

1 2 3 4 5 6 7 8 9 10 <?php $filename = "upload/1506349895.jpg"; $exif = exif_read_data($filename); $ort = $exif[‘Orientation’]; echo $ort; ?>

25/09/2017, 23h27
sabotage

Pour que cela fonctionne il faut que la photo ait été prise avec un appareil qui renseigne l'orientation de l'image (les téléphones le font apparement).

Tu pourrais redresser systématiquement les photos en paysage mais si quelqu'un fait une vraie photo en paysage, elle sera redresser à tord.

L'analyse intelligente de l'image pour identifier le sens du visage, ce n'est plus vraiment du domaine de PHP.
25/09/2017, 23h55
ABCIWEB

Salut, j'ai donné une réponse ici à une question semblable.
26/09/2017, 09h12
Invité
Bonjour,

rechercher un script "automatique" est utopique.

Par contre, rien ne t'empêche :
- d'écrire une fonction de ROTATION*,
- et de proposer un bouton en "Admin" et/ou l'Espace membre" pour faire tourner la photo, avec options +90° / -90° / 180°
- imagerotate()
* D'ailleurs, ça manque à ma panoplie de fonctions.
Je devrais m'y atteler un de ces jours...
26/09/2017, 19h44
toulousain3117

Un ami dévellopeur vient justement de me dire la même chose et c'est vrai que je n'y ai pas pensé je vais y bosser dessus

J'ai essayé ce code, mais j'ai l'erreur :

L'image https://www.xxxx.com/test.php ne peut être affichée car elle contient des erreurs

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
43
44
45
46
47
48
49
<?php
// Fichier et degrés de rotation
$filename = 'notfound.png';
$degrees = 90;
 
$info = new SplFileInfo($filename);
$ext = $info->getExtension();
if($ext == 'jpg' || $ext == 'jpeg'){
// Content type
header('Content-type: image/jpeg');
 
// Chargement
$source = imagecreatefromjpeg($filename);
 
// Rotation
$rotate = imagerotate($source, $degrees, 0);
 
// Affichage
imagejpeg($rotate);
}elseif($ext == 'png'){
 
header('Content-type: image/png');
 
// Chargement
$source = imagecreatefrompng($filename);
 
// Rotation
$rotate = imagerotate($source, $degrees, 0);
 
// Affichage
imagepng($rotate);
}elseif($ext == 'gif'){
 
header('Content-type: image/gif');
 
// Chargement
$source = imagecreatefromgif($filename);
 
// Rotation
$rotate = imagerotate($source, $degrees, 0);
 
// Affichage
imagegif($rotate);
}
 
// Libération de la mémoire
imagedestroy($source);
imagedestroy($rotate);
?>

27/09/2017, 03h34
ABCIWEB

Commence par tester l'exemple du manuel, chez moi cela fonctionne correctement.
27/09/2017, 10h40
toulousain3117

C'est le script du manuel que j'ai personnalisé pour une image png gif ou jpg

Mais le code est celui du manuel

J'ai réussi à le faire en jquery et sauvegarde en php vue que c'est un topic PHP je ne met que le code PHP ah moins qu'on me demande de mettre le code complet.

Mais pour expliquer, j'ai donc créer plusieurs point :

90 | -90 | 180 | 360

donc j'ai mis en place une prévisualisation au click l'image se tourne dans l'angle souhaité car une redéfinition en css donc rotate en css.

une fois l'angle choisi, on clique sur le bouton sauvegardé qui appelle donc la page saveimg.php avec en post l'angle choisi et l'image choisi.

L'angle pendant le choix de l'angle se rempli dans un champs en hidden et dans l'appelle de la page en js on reprends simplement la valeur du champs inscrits puis dans la page saveimg.php on récupére l'angle et l'adresse de l'image et après ça se fait automatiquement
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 43 44 45 46 47 <?php header('Content-type: image/jpeg'); $filename = $_POST["image"]; $deg = $_POST["degre"]; $valeur = explode('/',$valeur); if($deg == "-90"){ $deg = 90; }elseif($deg == "90"){ $deg = -90; } // Fichier et degrés de rotation $rotateFilename = $filename; // PATH $degrees = $deg; $fileType = strtolower(substr($filename, strrpos($filename, '.') + 1)); if($fileType == 'png' || $fileType == 'PNG'){ header('Content-type: image/png'); $source = imagecreatefrompng($rotateFilename); $bgColor = imagecolorallocatealpha($source, 255, 255, 255, 127); // Rotate $rotate = imagerotate($source, $degrees, $bgColor); imagesavealpha($rotate, true); imagepng($rotate,$rotateFilename); echo("ok"); } if($fileType == 'jpg' || $fileType == 'jpeg'){ header('Content-type: image/jpeg'); $source = imagecreatefromjpeg($rotateFilename); // Rotate $rotate = imagerotate($source, $degrees, 0); imagejpeg($rotate,$rotateFilename); echo("ok"); } // Free the memory imagedestroy($source); imagedestroy($rotate); ?>

27/09/2017, 17h26
ABCIWEB

Oui c'est une solution à la quelle je pensais, mais finalement je viens de découvrir un problème lors de prévisualisation des images en javascript. En effet même lorsque mon image a subit une rotation injustifiée dans l'explorateur de fichiers, l'affichage de la prévisualisation en javascript rétabli l'orientation correcte définie dans mon logiciel photo. Si bien que le visiteur ne ferait aucune correction, mais pour autant si l'on fait afficher l'image enregistrée en html la rotation observée dans l'explorateur est bien présente.

Je ne peux pas affirmer que ce comportement est général, j'ai juste essayé sur une image... Pour dire que le contrôle de l'orientation en javascript est plus délicate que prévu.
27/09/2017, 21h44
toulousain3117

si tu désires je peux t'envoyer un lien en mp ou tu peux tester le code.

La rotation se fait bien en live, et lors du remplacement sur le serveur. la rotation est correcte
28/09/2017, 00h51
ABCIWEB

Oui poste le code jquery sur le forum, ce sera plus simple et profitable pour tout le monde.

Après je ne dis pas qu'on ne peut pas faire de rotation, je dis que la prévisualisation javascript initiale au chargement de l'image ne correspond pas toujours à l'éventuelle rotation observée dans l'explorateur de fichiers et qui sera répercutée dans l'affichage html. Postes ton code pour que je puisse le tester de manière autonome et voir ce qu'il en est avec des exemples d'images que j'ai sur mon ordinateur.

Petite remarque sur ton code php, tu n'as pas besoin de tester la variante $fileType == 'PNG' puisque tu utilise strtolower pour transformer les extensions en minuscules.
28/09/2017, 09h10
Invité

Bonjour

J'ajoute que ce n'est pas comme ça qu'on récupère l'extension d'un fichier.
28/09/2017, 10h51
Celira

Citation:

Envoyé par jreaux62

ce n'est pas comme ça qu'on récupère l'extension d'un fichier.

Je dirais même plus : pathinfo :D

Au passage, une instruction echo("ok"); avec un header de type image, ça risque de faire des choses bizarres... :roll:

pour récupérer l'extension je me suis référé au manuel :
http://php.net/manual/fr/splfileinfo.getextension.php

Pour le code complet le voici :

donc le html :

j'ai donc deux colonne une ou je vois la prévisualisation et une autre ou j'affiche la liste des photos des membres.

En cliquant sur une photo je change donc dynamiquement le src cible pour affiché en live la photo que je veux modifier :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<div class="imggauche">
<div class="boxradio">
<div class="radio" id="reset">Reset</div> |
<div class="radio" id="rot90">90°</div> |
<div class="radio" id="rotmoins90" >-90°</div> |
<div class="radio" id="rot180">180°</div> |
<div class="radio" id="rot360" >360°</div>
 
</div><div class="btnimg"><input type="button" id="save" style="display:none;" value="Sauvegarder"></div>
<div class="imag" id="divimg">
<img src="<?php echo $filename; ?>"  style="display:none; " id="imagejs">
</div>
<input type="hidden" id="idimage">
<input type="hidden" id="degre">
<input type="hidden" id="urlimg" value="<?php echo $filename; ?>">
</div>
 
 
 
<div class="imgdroite"><div class="titredroite">Mes Photo</div><div class="contentimg"><?php
$sld = "SELECT * from albums where id_user= $id_con";
$sls = $conn->query($sld);
 
 
 
 
while($sl = mysqli_fetch_array($sls)){
 
	$mini = $sl["miniature"];
	$normal = $sl["lien"];
	$pdp = $sl["photodp"];
	$idimg = $sl["id"];
	?>
 
	<script type="text/javascript">
   $(document).ready(function(){
 
	 $('#img<?php echo $idimg; ?>').click(function() {
 
 
var urlimg = $(this).attr("for");
 var idimg = $("#idimg<?php echo $idimg; ?>").val();
 
 $("#idimage").val(idimg);
 $("#imagejs").attr('src', urlimg);
 
 $("#imagejs").css({
            'display':'initial' 
 
        });
 
		});	
 
	});
 
</script>
 
<div class="listimg">
<a id="img<?php echo $idimg; ?>" for="<?php echo $mini; ?>"><img src="<?php echo $mini; ?>"></a>
<input type="hidden" id="idimg<?php echo $idimg; ?>" value="<?php echo $idimg; ?>">
</div>
 
 
<?php	
}
 
 
 
 
 ?></div>

Voila le js :
donc il y a le code pour sauvegarder en php
aussi le code pour récuperer le lien de l'image et changé le src, et aussi le code car le chargement de l'image ne se fait pas dessuite car j'ai fait une navigation en jquery, donc quand je viens sur la page le code en question refait un reload de l'image qui permet de voir le changement.

et aussi, le fameaux code js qui permet de faire la rotation de l'image en changeant simplement le degrés du css

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<script type="text/javascript">
   $(document).ready(function(){
	   $('#imagejs').load('rotate.php #imagejs', function () {
 
 
		   var img = $(this);
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;
 
    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
 
 
});
	  $("#reset").on('click', function() {
 
		  var degre = 0;
				$("#imagejs").css({
            '-webkit-transform':'rotate('+degre+'deg) ', 
            '-moz-transform':'rotate('+degre+'deg) ',
            'transform':'rotate('+degre+'deg) '
        });
 
		$("#save").css({
            'display':'none'
 
        });
 
		$("#degre").val(degre);
	   });
 
	    $("#rot90").on('click', function() {
 
		   var degre = 90;
				$("#imagejs").css({
            '-webkit-transform':'rotate('+degre+'deg) ', 
            '-moz-transform':'rotate('+degre+'deg) ',
            'transform':'rotate('+degre+'deg) '
        });
		$("#save").css({
            'display':'block'
 
        });
				$("#degre").val(degre);
	   });
 
	    $("#rotmoins90").on('click', function() {
 
		   var degre = -90;
				$("#imagejs").css({
            '-webkit-transform':'rotate('+degre+'deg)', 
            '-moz-transform':'rotate('+degre+'deg)',
            'transform':'rotate('+degre+'deg)'
        });
				$("#degre").val(degre);
				$("#save").css({
            'display':'block'
 
        });
	   });
 
 
	    $("#rot180").on('click', function() {
 
		  var degre = 180;
				$("#imagejs").css({
            '-webkit-transform':'rotate('+degre+'deg)', 
            '-moz-transform':'rotate('+degre+'deg)',
            'transform':'rotate('+degre+'deg)'
        });
				$("#degre").val(degre);
				$("#save").css({
            'display':'block'
 
        });
	   });
	    $("#rot360").on('click', function() {
 
		  var degre = 360;
				$("#imagejs").css({
            '-webkit-transform':'rotate('+degre+'deg)', 
            '-moz-transform':'rotate('+degre+'deg)',
            'transform':'rotate('+degre+'deg)'
        });
				$("#degre").val(degre);
				$("#save").css({
            'display':'block'
 
        });
	   });
 
 
	   $("#remplir").bind("change paste keyup", function() {
 
		 var img = $(this).val();
		$.ajax({
        url: img,
        error: function()
        {
           var err = "homme.jpg";
		   $("#imagejs").attr('src', err);
        },
        success: function()
        {
 
			$("#imagejs").attr('src', img);
        }
    });
 
 
 
 
 
 
 
 
 
 
 
 
	   });
 
 
 
 
 
	  $('#save').on('click', function(e) {
 
		var degre = $("#degre").val();
		var urlimg = $("#idimage").val();
 
			$.ajax({
				url : "saveimg.php",
					type: "POST",
					data: {degre : degre, image : urlimg},
 
				success: function(data) {
					if(data == 'ok') {
				alert("Succés");
 
				$("#imagejs").load('rotate.php #imagejs');
 
 
				$("#save").css({
            'display':'none'
 
        });
 
					} else {
						alert('Erreur : '+ data);
					}
				}
			});
 
 
		return false;
	});
   });
</script>

un peu de css :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<style>
.boxradio {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	background: #67B0D1;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.radio {
	display: contents;
	position: relative;
	margin: 10px;
	cursor: pointer;
}
 
.imag {
	display: inline-block;
	position: relative;
	margin: 10px;
	float: left;
 
}
 
.imag img{
 
	margin: 10px;
	position: relative;
	float: left;
	margin-top: 10%;
 
}
 
.imgdroite {
	position: relative;
	float: right;
	width: 24%;
	height: 100%;
	top: 0;
	margin-top: 0;
	display: inline-block;
	border-left: 1px solid;
	border-right: 1px solid;
	border-color: #67B0D1;
}
.imggauche {
	position: relative;
	float: left;
	width: 75%;
	height: 100%;
	display: block;
}
 
.btnimg {
	position: absolute;
	text-align: center;
	float: right;
}
 
.titredroite {
	display: block;
	position: relative;
	float: left;
	width: 100%;
	text-align: center;
	background: #67B0D1;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
 
.listimg {
	text-align: center;
	margin: 5%;
	top: 6px;
	position: relative;
	cursor: grab;
}
</style>

et la page php :
tu noteras que dans le php j'inverse les valeurs 90 et -90 car en réalité si je laisse 90 degrés comme valeur, sur le serveur l'image a fait une rotation de -90 au lieu de 90, donc j'ai inversé les valeurs en php :

et dans mon exemple je récupére seulement le degrés et le numero ID de ma photo dans ma bdd, car j'ai trois taille différentes, du coup avec la rotation elle est pris en compte par mes 3 formats .

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php
header('Content-type: image/jpeg');
include("mysqlcon.php");
 
 
$idimag = $_POST["image"];
$deg = $_POST["degre"];
 
 
 
$img = "SELECT * from albums where id = $idimag";
$imag = $conn->query($img);
 
$ima = mysqli_fetch_array($imag);
$normal = $ima["lien"];
$small = $ima["miniature"];
$pdp = $ima["photodp"];
 
if($deg == "-90"){
	$deg = 90;
	}elseif($deg == "90"){
	$deg = -90;
	}
 
$degrees = $deg;
$fileType = strtolower(substr($normal, strrpos($normal, '.') + 1));
 
if($fileType == 'png' || $fileType == 'PNG'){
   header('Content-type: image/png');
 
   //Normal
   $source = imagecreatefrompng($normal);
   $bgColor = imagecolorallocatealpha($source, 255, 255, 255, 127);
   $rotate = imagerotate($source, $degrees, $bgColor);
   imagesavealpha($rotate, true);
   imagepng($rotate,$normal);
 
 
   //Small
    $source1 = imagecreatefrompng($small);
   $bgColor = imagecolorallocatealpha($source1, 255, 255, 255, 127);
 
   $rotate1 = imagerotate($source1, $degrees, $bgColor);
   imagesavealpha($rotate1, true);
   imagepng($rotate1,$small);
 
   //Photo de profil
   $source2 = imagecreatefrompng($pdp);
   $bgColor = imagecolorallocatealpha($source2, 255, 255, 255, 127);
   $rotate2 = imagerotate($source2, $degrees, $bgColor);
   imagesavealpha($rotate2, true);
   imagepng($rotate2,$pdp);
 
 
    echo("ok");
 
}
 
if($fileType == 'jpg' || $fileType == 'jpeg'){
   header('Content-type: image/jpeg');
   //Normal
   $source = imagecreatefromjpeg($normal);
   $rotate = imagerotate($source, $degrees, 0);
   imagesavealpha($rotate, true);
   imagejpeg($rotate,$normal);
 
 
   //Small
    $source1 = imagecreatefromjpeg($small);
   $rotate1 = imagerotate($source1, $degrees, 0);
   imagesavealpha($rotate1, true);
   imagejpeg($rotate1,$small);
 
   //Photo de profil
   $source2 = imagecreatefromjpeg($pdp);
   $rotate2 = imagerotate($source2, $degrees, 0);
   imagesavealpha($rotate2, true);
   imagejpeg($rotate2,$pdp);
   echo("ok");
}
 
// Free the memory
imagedestroy($source);
imagedestroy($source1);
imagedestroy($source2);
imagedestroy($rotate);
imagedestroy($rotate1);
imagedestroy($rotate2);
?>

En ce qui concerne le header image avec le echo("ok"); cela fonctionne correctement sans avoir de chose bizarre

28/09/2017, 13h11
Invité

Citation:

Liste de paramètres

.....

angle
L'angle de rotation, en degrés. L'angle de rotation est interprété comme étant le nombre de degrés à tourner l'image dans le sens inverse des aiguilles d'une montre.
28/09/2017, 14h56
toulousain3117
d'ou le pourquoi j'ai rajouté
Code:

1 2 3 4 5 6 7 8 $deg = $_POST["degre"]; //exemple 90 if($deg == "-90"){ $deg = 90; }elseif($deg == "90"){ $deg = -90; }
car en js l'image tourne dans le bon sens, mais pas avec php et en rajoutant ce code j'ai donc la bonne rotation
28/09/2017, 18h09
ABCIWEB

Ok merci pour le code.

Oui donc la remarque que je faisais plus haut ne s'applique pas à ton code. En effet quand je dis que la prévisualisation en javascript ne respecte pas l'éventuelle rotation observée dans le navigateur de fichiers, je parle d'une prévisualisation obtenue avec la méthode javascript createObjectURL lors de la sélection d'un fichier dans l'explorateur de fichiers. Donc je parlais d'une prévisualisation avant upload.

Comme dans ton code tu exploite la ressource html des images déjà traitées par php c'est normal que les rotations observées correspondent puisque tu utilise le résultat final.

Mon idée était plutôt de corriger le problème avant l'upload des images plutôt qu'après. D'ailleurs je me demande si on ne pourrait pas le faire quasi automatiquement. Si createObjectURL met l'image dans le bon sens - ce que j'observe dans mes premiers tests - il suffirait de comparer la largeur javascript et la largeur php qui ne sera pas la même si l'image a subit une rotation de 90°. Pour peu que les rotations (non désirées) des images soient toutes dans le même sens on pourrait par exemple appliquer une rotation de -90° lors de l'upload en php si les largeurs (ou hauteurs) javascript et php ne correspondent pas.

Il faudrait en savoir plus sur le mystère des rotations avant de coder, sinon la méthode empirique risque de prendre beaucoup plus de temps, mais cela pourrait être une idée pour traiter peut-être efficacement et automatiquement la majorité de ces cas tordus...

P.S Même si ça marche, enlèves-le quand même ton "echo OK" ça fait mauvais genre. Tu envoies un header pour dire que tu affiches une image, et juste en dessous tu fais afficher du texte. Cela fonctionne parce que php tolère beaucoup de choses et fais des corrections automatiques mais d'un point de vue logique ça laisse à désirer et surtout on n'en comprend pas l'utilité.
28/09/2017, 20h26
toulousain3117

comme j'ai dis plus haut j'ai fait l'envoi en jquery vers php. Donc echo("ok") me permet d'avoir un retour de réponse dans mon js pour continuer le code. je suis obligé d'avoir ça pour la validation j'ai essayé avec un header type json et deux headers ça me renvoit une erreur