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

**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** · 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)

Upload et redimentionnement d'image

jQuery

Vue hybride

Discussions similaires

Partager

Partager