Upload et redimentionnement d'image

Version imprimable

26/09/2010, 10h53
Invité

Upload et redimentionnement d'image

Bonjour,
Pour associer un avatar a un pseudo, j'ai besoin de pouvoir redimensionner une image et de l'uploader dans la foulé.

Pour l'upload j'ai trouvé ce plugin : http://www.uploadify.com/demo/
Mais cela ne fait qu'une partie du travail.

Connaissez vous un plugins qui fait les deux ?

Merci de votre aide
26/09/2010, 11h03
Arnaud F.

Bonjour,

recherchez "jQuery crop and upload", vous trouverez les plugins ;)
26/09/2010, 11h18
Invité

en effet j'avais déjà fait des recherches de ce type, mais se que j'ai trouver permet sur la base d'une grande image d'en sélectionner une partie pour en faire une miniature.
je ne souhaite pas proposer cela mais seulement redimensionner a la voler suivant des paramètres comme hauteur fixe, largeur fixe, taux de compression, conservation des proportions
26/09/2010, 13h32
Bovino

Ne rêve pas, il n'est pas possible en JavaScript de modifier les fichiers du client et jQuery ne fait pas de miracle à ce niveau.
Il faut uploader l'image et la redimmensionner sur le serveur.

ça devrait être faisable dans un avenir proche

voici un test sur FireFox 3.6

Je charge un fichier local dans un objet Image avec
FileReader, ensuite je redimensionne dans un objet canvas
avec drawImage. Enfin j'extrais les données binaires
du canvas avec getImageData

Cependant à ce stade on a un textarea prêt à être posté avec
les données brutes (raw) de l'image et en format texte. Ce qui n'est
donc pas encore utilisable car ça pourrait bien être plus lourd que
l'image non redimensionnée au format jpg :-)

Cependant on pourrait imaginer compresser l'image en jpg avec
un code de compression écrit en javascript et stocker ça en base64
ou hexa ou même binaire dans un champs caché, qu'en pensez-vous ?
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 <body> <input type='file' id='file' /> <form> <textarea id='imagedata'></textarea> </form> <canvas id="canvas"></canvas> <script type='text/javascript'> var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var file = document.getElementById('file'); file.onchange = function(event) { var file = this.files[0]; var reader = new FileReader(); var img = new Image(); reader.onload = (function(aImg) { return function(e) { aImg.onload = function() { var w = 100; var h = Math.round(aImg.height * w / aImg.width); can.width = w; can.height = h; ctx.drawImage(aImg, 0, 0, w, h); var imgDat = ctx.getImageData(0, 0, w, 1 /* h */); var ta = document.getElementById('imagedata'); ta.value = imgDat.data.join(','); } aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); }; </script> </body>

30/09/2010, 09h42
danielhagnoul

Bonjour.

Exemple : jQuery image upload & crop
30/09/2010, 09h50
marcha

Citation:

Envoyé par danielhagnoul

Bonjour.

Exemple : jQuery image upload & crop

Rien à voir avec le sujet traité ici, le resize se fait coté serveur (mais sinon, c'est un très joli script)

EDIT: Pardon, pas "rien à voir" sorry
30/09/2010, 10h05
danielhagnoul

Comme disait quelqu'un...

Citation:

Envoyé par Bovino

Ne rêve pas, il n'est pas possible en JavaScript de modifier les fichiers du client et jQuery ne fait pas de miracle à ce niveau.
Il faut uploader l'image et la redimmensionner sur le serveur.
30/09/2010, 18h53
marcha

Si si faut rêver, c'est faisable (pas encore crossbrowser, mais bientôt)
30/09/2010, 21h10
Bovino

Citation:

Envoyé par marcha

Si si faut rêver, c'est faisable (pas encore crossbrowser, mais bientôt)

Personnellement, c'est pour cela que je n'utilise pas ce genre de script qui restent encore selon moi plus des "proof of concept" que de réelles fonctionnalités, mais tu as raison de dire que ça viendra, c'est je pense l'évolution logique de JavaScript ces derniers temps ;)
01/10/2010, 18h09
ABCIWEB

En même temps qui dit avatar et pseudo dit souvent php pas loin. Et il existe une foultitude de classes qui proposent ça en php... :)

Bonjour

Citation:

Envoyé par marcha

ça devrait être faisable dans un avenir proche

voici un test sur FireFox 3.6

Je charge un fichier local dans un objet Image avec
FileReader, ensuite je redimensionne dans un objet canvas
avec drawImage.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if ($("#canvasID")[0].getContext){
    var ctx = $("#canvasID")[0].getContext("2d");
    var img = new Image();
 
    $(img).load(function(){
        /*
         * image originale : ajax.png 332 * 291 et j'affiche la zone
         * top 50, left 50, width 100, height 100
         *
         * slicing img : https://developer.mozilla.org/en/Canvas_tutorial/Using_images
         * drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
         */
        ctx.drawImage(img, 50, 50, 100, 100, 10, 10, 100, 100);
    });
 
    $("#fileID").change(function(){
        // Firefox 3.6
        img.src = this.files[0].getAsDataURL();
    });
}

04/10/2010, 19h22
danielhagnoul
Sauvegarde des images :
- avec Firefox 3.6, il suffit d'un clic droit pour le format PNG ;
- pour d'autres formats, voir : http://www.nihilogic.dk/labs/canvas2image/

@danielhagnoul Merci pour ton lien. Il apporte le "chainon manquant"

Voici donc une démonstration de faisabilité d'upload
d'image redimensionnée par le client. (FireFox 3.6)

Code PHP qui renvoie simplement ce qu'il reçoit pour vérification:

Code:

1
2
3
4
5
6
7
 
<?php
        list($header, $data) = explode(',', $_REQUEST['imagedata']);
        list($mime, $enc) = explode(';', substr($header, strlen('data:')));
        header('Content-Type: '.$mime);
        echo base64_decode($data);
?>

La page HTML et son Javascript

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type='file' id='file' />
<form action='upload.php' method='post'>
<textarea id='imagedata' name='imagedata'></textarea>
<input type='submit' value='Envoyer' />
</form>
<canvas id="canvas"></canvas>
<script type='text/javascript'>
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var file = document.getElementById('file');
file.onchange = function(event) {
	var file = this.files[0];
	var reader = new FileReader();
	var img = new Image();
	reader.onload = (function(aImg) {
		return function(e) {
			aImg.onload = function() {
				var w = 100;
				var h = Math.round(aImg.height * w / aImg.width);
				can.width = w;
				can.height = h;				
				ctx.drawImage(aImg, 0, 0, w, h);
				var jpg = can.toDataURL("image/jpeg");
				var ta = document.getElementById('imagedata');
				ta.value = jpg;
			}
			aImg.src = e.target.result;
		};
	})(img);
    reader.readAsDataURL(file);
};
</script>
</body> 
</html>

04/11/2010, 07h10
lubanoo

Est-ce que vous savez si ça marche aussi si Chrome et IE ?

D''autre part : comment faire pour détecter que l'on est sur Firefox 3.6 et adapter le traitement (compression ou sans) en fonction du navigateur ?

Merci d'avance pour vos réponses.