Dessin d'image sur toile - plus grand que réel
Je veux dessiner une image à partir d'un fichier jpg sur toile.
Mon code:
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'img/my_image.jpg';
Le problème est que l'image sur la toile est beaucoup plus grand que dans le fichier. Pourquoi? Comment puis-je dessiner une image à taille réelle?
Mise à JOUR:
résultat: http://jsfiddle.net/AJK2t/
source d'informationauteur latata
Vous devez vous connecter pour publier un commentaire.
C'est votre problème:
Vous définissez la taille visuelle de votre toile, mais pas le nombre de pixels. Par conséquent, le navigateur est mise à l'échelle de la toile pixels.
La solution la plus simple est:
La
width
etheight
paramètres de contrôle le nombre de pixels dans la zone de travail. Sans le style CSS, le visuel par défaut de la taille de la toile sera également de cette taille, résultant en une toile pixel par pixel à l'écran (en supposant que vous n'avez pas zoomé le navigateur web).Copier/coller à partir de ma réponse à une question relative à la:
Exemple De Travail: http://jsfiddle.net/jzF5R/
Afin de mettre à l'échelle une image, vous devez fournir à l'échelle de la largeur et la hauteur que vous souhaitez
ctx.drawImage()
:Maintenir la taille originale de l'image:
Garder en toile de déborder hors de la page:
Vous pouvez facilement ajuster la largeur de l'image et de la hauteur de 70% de l'original:
Pour afficher un flux MJPEG sur une toile (ou autre chose) sans définir la largeur et la hauteur de la toile en HTML, en utilisant uniquement CSS pour obtenir un réactif de toile et de l'ajustement à la page, j'utilise:
L'image est entièrement contenu dans la toile, quelle que soit la taille de la toile (le rapport entre la hauteur et la largeur n'est pas gardé, mais il n'a pas d'importance, un
height:auto;
en css pouvons résoudre ce problème).Et voilà !