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>