Discussion :

[X260SH]

Bonjour à tous !

Je cherche à créer un interface simple d'utilisation pour qu'un visiteur quelconque puisse héberger des images. J'ai créé un petit script en JS pour que l'image soit redimensionnée en 640*360 (avec un fond noir) grâce à l'outil canvas. Je cherche maintenant à hébergé cette image modifiée sur mon serveur en PHP. Pour cela, j'ai converti l'image canvas en data URL (avec canvas.toDataURL), que j'ai mis dans un input hidden et que j'envoie en POST. Le problème, c'est que la taille du POST est limité à 2Mo sur mon serveur, et je ne sais pas comment connaître le poids du canvas pour avertir l'utilisateur que l'image ne peut pas être hébergée.

Mon code :

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
			<form action="traiter_image.php" method="post" id="fileupload" name="fileupload" enctype="multipart/form-data" >
				<input type="file" id="selectedfile" placeholder="Choisissez un fichier..."  class="fichier_envoye" />
				<input type="text" id="url" name="url" value="URL" style="min-width:800px;"/>
				<input type="submit" value="Submit" />
			</form>
			<script>
			function imageHandler(e2) 
			{ 
				var c = document.getElementById("canvas");
				var ctx = c.getContext("2d");
				var img = new Image();   // Crée un nouvel objet Image
				img.src = e2.target.result; // Définit le chemin vers sa source
				img.onload = function()
				{
				  ctx.clearRect(0, 0, c.width, c.height);
				  ctx.fillStyle = "black";
				  ctx.fillRect(0, 0, c.width, c.height); 
				  var largeurImage = img.width * (360/img.height);
				  var longueurImage = img.height * (360/img.height);
				  ctx.drawImage(img, 640/2 - largeurImage/2, 360/2 - longueurImage/2, largeurImage, longueurImage);
				  var dataURL = c.toDataURL("image/png");
 
				  document.getElementById('url').value=dataURL;
				}
			}
 
			function loadimage(e1)
			{
			  var filename = e1.target.files[0]; 
			  var fr = new FileReader();
			  fr.onload = imageHandler;  
			  fr.readAsDataURL(filename); 
			}
 
			window.onload=function()
			{
			  var y = document.getElementById("hiddenfile");
			  y.addEventListener('change', loadimage, false);
			}
			</script>

[SpaceFrog]

essaye

Code :

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

<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />

[X260SH]

Tu veux dire comme ça :

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
			<form action="traiter_image.php" method="post" id="fileupload" name="fileupload" enctype="multipart/form-data" >
				<input type="file" id="selectedfile" placeholder="Choisissez un fichier..."  class="fichier_envoye" />
			********<input type="text" id="url" name="MAX_FILE_SIZE" value="2097152" style="min-width:800px;"/>
				<input type="submit" value="Submit" />
			</form>
			<script>
			function imageHandler(e2) 
			{ 
				var c = document.getElementById("canvas");
				var ctx = c.getContext("2d");
				var img = new Image();   // Crée un nouvel objet Image
				img.src = e2.target.result; // Définit le chemin vers sa source
				img.onload = function()
				{
				  ctx.clearRect(0, 0, c.width, c.height);
				  ctx.fillStyle = "black";
				  ctx.fillRect(0, 0, c.width, c.height); 
				  var largeurImage = img.width * (360/img.height);
				  var longueurImage = img.height * (360/img.height);
				  ctx.drawImage(img, 640/2 - largeurImage/2, 360/2 - longueurImage/2, largeurImage, longueurImage);
				  var dataURL = c.toDataURL("image/png");
 
				  document.getElementById('url').value=dataURL;
				}
			}
 
			function loadimage(e1)
			{
			  var filename = e1.target.files[0]; 
			  var fr = new FileReader();
			  fr.onload = imageHandler;  
			  fr.readAsDataURL(filename); 
			}
 
			window.onload=function()
			{
			  var y = document.getElementById("hiddenfile");
			  y.addEventListener('change', loadimage, false);
			}
			</script>

[SpaceFrog]

non un input hidden

[danielhagnoul]

On peut obtenir une bonne approximation de la taille de l'image dans le JS :

Code :

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

1
2
3
4
5
var 
    dataUrl = canvas.toDataURL( "image/png" ),
    dataUrlLength = dataUrl.length,
    pngHead = "data:image/png;base64,",
    imgFileSize = Math.round( ( dataUrlLength - pngHead.length ) * 3/4 );

[X260SH]

Merci danielhagnoul, c'est ce que je cherchais à faire !
Cependant, même en mettant une limite, certaine image ne passent pas l'envoie en PHP... :/ Je vais me tourner vers la section PHP pour pallier à ce problème.
Merci !
[EDIT] Apparement, il faut mieux utiliser AJAX, en fait !