redimensionner une image chargée en mémoire via javascript

Version imprimable

Bonjour,

j'aimerais pouvoir modifier la taille d'une image chargée en mémoire et la stocker modifiée dans la mémoire.
Apparemment, en javascript, cela n'a pas l'air possible alors qu'en php je sais le faire (voir ici par exemple).

En gros, je n'affiche pas l'image dans une balise image mais je m'en sert, en html5, pour remplir une surface définie dans un canvas
Code:

1 2 var pattern = context.createPattern((tab_items[tmp]).image, "no-repeat"); context.fillStyle = pattern;
Voici également le code du pré-chargement de la banque d'images:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function loadImages(sources, callback) { var images = {}; var loadedImages = 0; var numImages = 0; // get num of sources for (var src in sources) {numImages++;} for (var src in sources) { images[src] = new Image(); images[src].onload = function(){if (++loadedImages >= numImages) {callback(images);}}; images[src].src = sources[src]; } }
Je voudrais pouvoir modifier la taille des images dans cette fonction de chargement.
Quand je modifie la taille de l'image (avec par exemple images[src].width = 100), la valeur est modifiée mais n'influence pas la taille affichée.

Y a-t-il moyen d'accéder au buffer où se trouve l'image afin de le modifier via javascript?
Ou bien existe-t-il une fonction html5 qui le permet (autre que dessiner une image canvas avec drawImage())?
A moins que l'on puisse utiliser un canvas comme paramètre du fillStyle.

Merci d'avance.

21/02/2012, 08h23
SpaceFrog

jette un oeil par là
https://developer.mozilla.org/en/Can...l/Using_images
ou
http://stackoverflow.com/questions/2...n-html5-canvas

Code:

drawImage(image, x, y, width, height)
21/02/2012, 10h20
lau_the_raptor

Merci pour la réponse rapide.

Mais, comme je le disais, le drawImage() ne fonctionne pas car il ne modifie pas l'image en elle-même. Il la modifie que dans le canvas.
Mon problème est que mon image est utilisée comme une texture (voir ici).
Le pattern n'accepte que le type Image, créé dans le code par new Image().
En gros, je pense qu'il faudrait créer un nouveau canvas qui serait caché (non affiché). Puis utiliser le drawImage() avec les modifications nécessaires. Et ensuite sauver le canvas caché en tant que nouvelle image.
Pour enfin utiliser cette image comme pattern.
Par contre je ne sais pas comment on sauve un canvas en image.

Merci d'avance.
21/02/2012, 10h33
SpaceFrog

Js n'a aucune emprise sur les image autrement que de modifier des propriétés de style.
SI tu veux modifier le fichier en lui même tu n'auras d'autre recours que de passer par le serveur et modifier l'image au moyen d'un langage serveur
Si c'est en php il y a un bon tuto de redimensionnement des images en php.
21/02/2012, 10h41
lau_the_raptor

Merci,

comme je le disais, je sais le faire en php sans problème, il y a juste que je ne peux pas le faire car le php ne sera pas pris en charge.

Ou sinon j'ai vu qu'il y avait une fonction context.getImageData()
Cela donne un CanvasPixelArray.
N'y a-t-il pas moyen de modiifer ce resultat en type Image?

Merci d'avance
21/02/2012, 10h43
Bovino

Code:

HTMLCanvasElement.toDataURL()

?
21/02/2012, 10h45
SpaceFrog

quoi que tu fasse js ne peut pas agir sur les dimensions du fichier image, tu ne pourras que redimensionner l'affichage.
21/02/2012, 10h53
lau_the_raptor

C'est bien ce que je pensais.
Je vais devoir trouver une autre solution.
21/02/2012, 20h03
Invité

bonjour
pour modifier la taille d'une image avec canvas il faut utiliser l'attribut scale tu divise 1 par la taille de l'image puis tu multiplie ce chiffre par la taille désiré

exemple pour une image qui fait 500px en hauteur et qui doit en faire 300px a l'arrivé

(1/500)*300=0.6

Code:

ctx.scale(0.6,0.6)

et ensuite on insere l'image

et comme dit precedement utiliser toDataURL()
21/02/2012, 20h22
lau_the_raptor

Merci pour la réponse,
mais mon problème n'est pas de calculer le ratio de redimensionnement de l'image ni de savoir comment l'insérer.
Le problème est plutôt de modifier "en interne" une image et non pas à l'affichage.
21/02/2012, 20h29
Invité

ton idée de creer un canvas invisible puis de redimensionner l'image me parait bonne ensuite tu sauvegarde l'image avec toDataURL() puis tu l’insère dans l'autre canvas et la sa devrait marché

peut etre que cette exemple t'aidera j'ai fait une simple division par deux pour la taille de l'image

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
    <!doctype html>
    <html lang="fr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
 
    <script type="text/javascript">
 
 
function azerty() {
 
 
	var fichier = document.getElementById('fileinput').files;
 
	var moncanvas1 = document.getElementById("cv1").getContext('2d');
 
			if (fichier[0].type.match('image.*')) {
 
				var charge=new FileReader();
				charge.readAsDataURL(fichier[0]);
 
				charge.onloadend = function(e){
					var ima=new Image();
					ima.src=e.target.result;
					ima.onload=function(){
 
					moncanvas1.drawImage(ima, 0, 0,ima.width/2,ima.height/2);
					}
				}
			}
		}
 
    </script>
    </head>
    <body>
    <br>
	<canvas id="cv1" width="550" height="350"></canvas>
    <input type='file' id='fileinput' onchange='azerty()'/>
     </body>
    </html>

22/02/2012, 09h19
lau_the_raptor

Merci beaucoup
Je vais encore essayer mais je ne pense pas que cela va fonctionner.
En fait il faudrait que le createPattern accepte un canvas ou un CanvasPixelArray. Et ça c'est pas gagné.

Bon voilà, je suis presque arrivé à une solution.
Cela fonctionne très bien sur internet explorer (pour une fois) mais sur firefox, il faut recharger la page pour que cela fonctionne. Et sur chrome cela fonctionne pas. Il doit y avoir un problème au niveau du cache ou quelque chose du genre.
Quelqu'un a une idée?

Voici le code (il faudra encore diminuer la taille du canvas dummy ou trouver une solution pour le retirer définitivement)

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
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>test image</title>
		<script type="text/javascript">
 
			function load_canvas()
			{
				var image_base = new Image();
				image_base.onload = function(){
					var canvas_dummy = document.getElementById("canvas_dummy");
					var context_dummy = canvas_dummy.getContext("2d");
					var canvas_destination = document.getElementById("canvas_destination");
					var context_destination = canvas_destination.getContext("2d");
 
					var destX = 0;
					var destY = 0;
					var sizeX = 32;
					var sizeY = 32;
 
					// il faut modifier la taille du canvas pour que cela corresponde à la taille de la nouvelle image
					canvas_dummy.width = sizeX;
					canvas_dummy.height = sizeY;
					// on met l'image réduite dans le canvas dummy
					context_dummy.drawImage(image_base,destX,destY,sizeX,sizeY);
 
					// on sauve le canvas dummy modifié dans une nouvelle image
					var dataURL = canvas_dummy.toDataURL();
					var image_destination = new Image();
					image_destination.src = dataURL;
 
					// on peut maintenant créer la texture
					var pattern = context_destination.createPattern(image_destination, "repeat");
					// et on l'applique au canvas_destination
					context_destination.fillStyle = pattern;
					context_destination.rect(0,0,canvas_destination.width,canvas_destination.height);
					context_destination.fill();
 
					// on vide le contenu du canvas_dummy
					context_dummy.clearRect(0, 0, canvas_dummy.width, canvas_dummy.height);
				};
				image_base.src = "images/64/camera.png"; 
			}
 
		</script>
	</head>
 
	<body onload="load_canvas();">
    	<div id="container"> Test de taille image
    	</div>
    	<canvas id="canvas_dummy" height="320" width="320"></canvas>
    	<canvas id="canvas_destination" height="320" width="320"></canvas>
	</body>
</html>

Voila, cela fonctionne sur firefox et opera. Par contre toujours rien avec Chrome.
Il y a aussi une obligation de garder la taille du canvas dummy à 1 pixel sur 1 pixel pour qu'opera ne décale pas le reste de l'affichage.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8" />
                <title>test image</title>
                <script type="text/javascript">
                        // il faut créer un canvas dummy dans le body du html
                        function load_canvas()
                        {
                                var canvas_dummy = document.getElementById("canvas_dummy");
                                var context_dummy = canvas_dummy.getContext("2d");
                                var canvas_destination = document.getElementById("canvas_destination");
                                var context_destination = canvas_destination.getContext("2d");
 
                                var destX = 0;
                                var destY = 0;
                                var sizeX = 32;
                                var sizeY = 32;
 
                                var image_base = new Image();
                                image_base.onload = function(){
                                        // il faut modifier la taille du canvas pour que cela corresponde à la taille de la nouvelle image
                                        canvas_dummy.width = sizeX;
                                        canvas_dummy.height = sizeY;
                                        // on met l'image réduite dans le canvas dummy
                                        context_dummy.drawImage(image_base,destX,destY,sizeX,sizeY);
                                        // on sauve le canvas dummy modifié dans une nouvelle image
                                        var dataURL = canvas_dummy.toDataURL();
                                        var image_destination = new Image();
                                        image_destination.src = dataURL;
                                        image_destination.onload = function(){
                                                // on peut maintenant créer la texture
                                                var pattern = context_destination.createPattern(image_destination, "repeat");
                                                // et on l'applique au canvas_destination
                                                context_destination.fillStyle = pattern;
                                                context_destination.rect(0,0,canvas_destination.width,canvas_destination.height);
                                                context_destination.fill();
                                                // on vide le contenu du canvas_dummy
                                                context_dummy.clearRect(0, 0, canvas_dummy.width, canvas_dummy.height);
                                                // on diminue la taille du dummy pour qu'il soit "caché" avec FF on peut le mettre à 0
                                                // par contre avec opera cela ne fonctionne pas => 1 pixel et tout ce passe bien
                                                canvas_dummy.width = 1;
                                                canvas_dummy.height = 1;
                                        };
                                };
                                image_base.src = "calculator.png"; 
                        }
                </script>
        </head>
 
        <body onload="load_canvas();">
                <canvas id="canvas_dummy" height="0" width="0"></canvas>
                <canvas id="canvas_destination" height="320" width="320"></canvas>
        </body>
</html>

23/02/2012, 17h46
Invité

bonjour
pour chrome met la page en ligne
23/02/2012, 18h27
lau_the_raptor

Ok, je vais essayer
23/02/2012, 20h06
lau_the_raptor

Effectivement quand on met le code en ligne, tout va bien avec chrome.
Encore un grand merci.