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