Upload et redimentionnement d'image

Invité · 26/09/2010, 10h53

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

**Arnaud F.** · 26/09/2010, 11h03

Bonjour,

recherchez "jQuery crop and upload", vous trouverez les plugins

Invité · 26/09/2010, 11h18

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

**Bovino** · 26/09/2010, 13h32

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.

**marcha** · 27/09/2010, 16h38

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

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

**danielhagnoul** · 30/09/2010, 09h42

Bonjour.

Exemple : jQuery image upload & crop

**marcha** · 30/09/2010, 09h50

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

**danielhagnoul** · 30/09/2010, 10h05

Comme disait quelqu'un...

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.

**marcha** · 30/09/2010, 18h53

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

**Bovino** · 30/09/2010, 21h10

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

**ABCIWEB** · 01/10/2010, 18h09

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

**danielhagnoul** · 04/10/2010, 12h09

Bonjour

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 :

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

**danielhagnoul** · 04/10/2010, 19h22

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/

**marcha** · 04/10/2010, 21h08

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

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

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 :

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

**lubanoo** · 04/11/2010, 07h10

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.

Upload et redimentionnement d'image

jQuery

Discussions similaires

Partager

Partager