Discussion :

[progdebutant]

Bonjour,

J'utilise pour dessiner sur le canvas la commande classique :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var fond=new Image();
fond.style.width="4000px";
fond.style.height="2000px";
fond.style.display="block";
fond.src="../images/guiness.png";
 
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext("2d");
var x=0,y=0;
ctx.drawImage(fond,x,y,600,600,0,0,600,300);

L'image source est d'une taille de 4000px par 2000px.
L'image source est d'abord chargée en mémoire puis je fais une copie d'une portion commençant à 0,0 et de taille 600x600 mais le résultat sur le canvas est une image agrandie, et en plus déformée en hauteur.

La copie doit avoir la même taille, c'est à dire 600,600 hors il y a deux défauts quand j'utilise la commande :
1) La hauteur de la copie est le double de la largeur donc : image déformée en hauteur.
D'où le fait que j'ai mis 300 à la place de 600 pour corriger le visu (ce que je ne devrais pas avoir à faire).
2) La copie est zoomée par rapport à l'image originale qui elle, est très fine. Je ne sais pas d'où vient le fait que la copie d'une portion d'image se retrouve zoomée sur le canvas, puisque je lui garde les mêmes dimensions.

Mon fichier css comporte juste ça :

Code css :

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
body{
position:absolute;	
overflow:hidden;
left:0;
top:0;
margin:0;
width:100%;
height:100%;
}
 
canvas{
position:absolute;
left:30px;
top:30px;
width:600px;
height:600px;
background: black;
display:block;
}

Quelqu'un saurait d'où vient ce zoom non voulu ?
Et la déformation en hauteur, du double de la largeur.

EDIT :
Pour les besoins d'une explication claire de mon problème je nettoie ma première version du problème !
Vala c'est fait !

[progdebutant]

Le zoom j'ai l'impression que ça vient du fait que j'ai donné la dimension 600x600 au canvas, car si je lui donne une taille plus petite l'image copiée dessus est retrécie, le contraire du zoom, mais alors il n'y a pas moyen de copier sur le canvas une portion d'une image de la mémoire vers le canvas et qu'elle garde sa résolution ?

[progdebutant]

Bon après un peu de repos j'ai résolu le problème, qui n'en était finalement pas un

Vu que l'image source est très grande et que j'en affiche une partie, celle-ci est affichée à sa taille normale ce qui nous paraît être du zoom mais non, en fait c'est juste la taille réelle de la partie copiée, par contre si j'avais copié non pas une partie mais la totalité de l'image source, en effet la copie m'aurait parue sans zoom, j'ai donc accusé mon programme de zoomer alors qu'il ne faisait que reproduire la taille réelle de l'image, voilà.

Problème résolu.