Discussion :

[toulousain3117]

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 ?

[sabotage]

Il existe des algorithmes qui tente de faire ça oui.
Tu as déjà fait une recherche ?

[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

[sabotage]

Que veux-tu exactement faire ?
S'il s'agit juste de connaitre l'orientation de l'appareil lors de la prise :

Code :

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

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.

[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

[toulousain3117]

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

Code :

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

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; 
 ?>

[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.

[ABCIWEB]

Salut, j'ai donné une réponse ici à une question semblable.

[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...

[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

[toulousain3117]

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 :

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
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);
?>

[ABCIWEB]

Commence par tester l'exemple du manuel, chez moi cela fonctionne correctement.

[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

[toulousain3117]

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 :

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
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);
?>

[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.

[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

[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.

[Invité]

Bonjour

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

[Celira]

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

Je dirais même plus : pathinfo

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

[toulousain3117]

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 :

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
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 :

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
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 :

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
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 :

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
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