2009-10-10 11 views
0

J'ai un problème avec la fonction drawImage de context2d. Chaque fois que je redimensionne une image, elle obtient une bordure sombre d'un pixel, ce qui est plutôt moche. Cela n'arrive que dans Firefox, pas dans Opera ou Webkit.Problème de mise à l'échelle Javascript/Canvas/Images dans Firefox

Est-ce un problème d'antialiasing? Pendant des heures j'ai étudié les exemples et la documentation disponible sans m'en débarrasser ... Je ne pouvais pas encore l'essayer sur un autre ordinateur alors peut-être que c'est peut-être un problème avec le matériel graphique/pilotes.

J'ai reproduit cet effet avec cet extrait minimal, en supposant que la taille d'exp.jpg est de 200x200 pixels.

<html> 
<body> 
<canvas id="canvas" width="400" height="400"></canvas> 
</body> 
    <script type="text/javascript" src="../../media/pinax/js/jquery-1.3.2.min.js"></script> 

<script type="text/javascript" > 
    context = $('#canvas')[0].getContext('2d'); 
    img = new Image(); 
    img.src = "exp.jpg"; 
    //while (!img.complete); 
    context.drawImage(img, 2,2,199,199); 
    context.drawImage(img, 199,2,199,199); 
</script> 
</html> 
+0

J'ai essayé ce code mais je ne vois aucune bordure noire. C'est avec Firefox 3.5.3 sur Windows. Je pense qu'il serait plus facile pour les gens de tester cela si vous aviez omis l'exigence jquery. –

+0

oui vous avez raison ... j'ai aussi oublié de dire que je dois redimensionner la page dans firefox pour rendre l'effet clair. Cependant, je l'utilise dans un effort pour dessiner des images en mosaïque, et puis ça devient vraiment énervant. Mais merci d'avoir essayé. –

+0

Vous pouvez simplement saisir le jQuery de Google pour éviter les problèmes de dépendance: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js J'ai fait une page de test: http://www.boogdesign.com/examples/canvas/image.html Ça me va bien, FF 3.5.3 sur Linux: http://www.boogdesign.com/examples/canvas/Canvas_test_ff.png – robertc

Répondre

Questions connexes