Redimensionner image à la taille d'un canvas

Version imprimable

Bonjour,

J'ai un petit soucis de taille d'image dans un canvas, j'arrive a charger l'image, a définir une taille pour mon canvas mais l'image apparait dans sa taille d'origine (supérieure a celle du canvas) et est donc tronquée...

Code:

1
2
3
<canvas id="canvasframe" class="canvas_screen">
Texte si le navigateur ne supporte pas le HTML Canvas
</canvas>

Code:

1
2
3
4
5
6
.canvas_screen{
	width:435px;
	height:350px;
	margin-top:15px;
	margin-bottom:15px;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function(){
    var canvas = document.getElementById("canvasframe");
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
    var imageObj = new Image();
 
    imageObj.onload = function(){
        context.drawImage(imageObj, destX, destY);
    };
    imageObj.src = "screen1.jpg";
};

21/02/2012, 11h35
lau_the_raptor

C'est normal dans le drawImage tu ne donnes que la destination. Tu dois également fournir la taille.
Voici un lien qui te donnes l'exemple.

Code:

context.drawImage(imageObj,destX,destY,destWidth,destHeight);
21/02/2012, 12h17
Thibault92

effectivement en lui passant destWidth,destHeight j'arrive a la redimensionner mais les dimensions ne correspondent pas avec celle du canvas, si je lui affecte les dimensions du canvas ou légèrement inférieures (400*300) l'image est encore tronquée, je suis obligé d'avoisiner les 300*150 pour qu'elle s'adapte au canvas 450*350 et je perd trop de qualité a ce moment la.
21/02/2012, 12h36
Thibault92

Mon image source fait 450*350, mon canevas cible aussi 450*350 mais pour l'avoir afficher en entier je dois lui passé du 300*150... 8O8O
21/02/2012, 13h53
Thibault92

RÉSOLU !!

Solution pour ceux que ça intéresse : les canvas ne prennent pas les paramètres width et height en CSS il faut les définir dans la balise <canvas>