Connaître poids canvas

Version imprimable

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:

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>

25/06/2015, 13h52
SpaceFrog

essaye

Code:

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

Tu veux dire comme ça :

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

25/06/2015, 14h06
SpaceFrog

non un input hidden

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

Code:

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

25/06/2015, 17h52
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 ;) !