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

**lau_the_raptor** · 21/02/2012, 02h06

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 :

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

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 :

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

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.

**SpaceFrog** · 21/02/2012, 08h23

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

Code :

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

drawImage(image, x, y, width, height)

**lau_the_raptor** · 21/02/2012, 10h20

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.

**SpaceFrog** · 21/02/2012, 10h33

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.

**lau_the_raptor** · 21/02/2012, 10h41

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

**Bovino** · 21/02/2012, 10h43

Code :

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

HTMLCanvasElement.toDataURL()

?

**SpaceFrog** · 21/02/2012, 10h45

quoi que tu fasse js ne peut pas agir sur les dimensions du fichier image, tu ne pourras que redimensionner l'affichage.

**lau_the_raptor** · 21/02/2012, 10h53

C'est bien ce que je pensais.
Je vais devoir trouver une autre solution.

Invité · 21/02/2012, 20h03

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 :

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

ctx.scale(0.6,0.6)

et ensuite on insere l'image

et comme dit precedement utiliser toDataURL()

**lau_the_raptor** · 21/02/2012, 20h22

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.

Invité · 21/02/2012, 20h29

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é

Invité · 21/02/2012, 21h12

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

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

**lau_the_raptor** · 22/02/2012, 09h19

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

**lau_the_raptor** · 23/02/2012, 01h36

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 :

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

**lau_the_raptor** · 23/02/2012, 13h46

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 :

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