Webkit canvas drawImage() et le canevas d'un facteur d'échelle not-integer de canevas?

J'ai un problème avec la méthode drawImage() de contexte de canevas si une image est dessinée sur un canevas qui a déjà un facteur d'échelle non-entier. Il semble que de telles images sont découpées de façon étrange (parfois, la partie la plus droite d'une image est coupée, parfois la partie la plus basse, parfois les deux). Ce problème apparaît au moins dans Google Chrome 6 (au moins stable), Chromium 6, peut-être même les dernières versions (dev-), et même Safari 5. Firefox n'a pas ce bug. Évidemment, c'est un problème de Webkit si je ne me trompe pas. Regardons le code suivant (fourni code entier pour une démonstration):Webkit canvas drawImage() et le canevas d'un facteur d'échelle not-integer de canevas?

<html> 
<head> 
    <style type="text/css"> 
    canvas { 
     border: solid 1px black; 
    } 
    </style> 
    <script type="text/javascript">  
    window.onload = function() { 
     var canvas = document.getElementById("canvas"); 
     var increase = document.getElementById("increase"); 
     var decrease = document.getElementById("decrease"); 
     var scale = document.getElementById("scale"); 
     var context = canvas.getContext("2d"); 
     var image = new Image(); 
     image.src = "image-3x5.png"; 
     var scaleX = 1; 
     var scaleY = 1; 
     var repaint = function() { 
     scale.innerHTML = scaleX + "; " + scaleY; 
     context.fillStyle = "#FFF"; 
     context.fillRect(0, 0, 1000, 750); 
     context.drawImage(image, 0, 0, 3, 5); 
     }; 
     var scaleXF = 1.2; // change both to 2 and it will be fixed 
     var scaleYF = 1.2; 
     decrease.onclick = function() { 
     scaleX /= scaleXF; 
     scaleY /= scaleYF; 
     context.scale(1/scaleXF, 1/scaleYF); 
     repaint(); 
     }; 
     increase.onclick = function() { 
     scaleX *= scaleXF; 
     scaleY *= scaleYF; 
     context.scale(scaleXF, scaleYF); 
     repaint(); 
     }; 
     repaint(); 
    }; 
    </script> 
</head> 
<body> 
    <div> 
    <span id="scale"></span> 
    </div> 
    <div> 
    <canvas id="canvas" width="1000" height="750"></canvas> 
    </div> 
    <div>  
    <input id="decrease" type="button" value="decrease" />  
    <input id="increase" type="button" value="increase" />  
    </div> 
</body> 
</html>

est-il donc un vrai bug? Ou y a-t-il des solutions de contournement?

Merci d'avance.

UPD:

considérons que nous avons l'image de 3x5 base64 suivant:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC

Source

2010-10-28 Lyubomyr Shaydariv

pouvez-vous nous donner l'image en tant que données: image/png; base64 ,? –

@Simon Sarris: Je ne sais pas si c'est un base64 bien formé, parce que je suis en retard et très pressé en ce moment. J'espère que je ne me trompe pas. Voir la mise à jour s'il vous plaît. –

Je reproduis bien le problème que vous voyez (avec ma propre image aussi) –

Vous avez raison, il est un bug.

La différence entre

context.setTransform(1*55.206143891243606, 0, 0, 1*55.206143891243606, 0, 0);

context.setTransform(1*55, 0, 0, 1*55, 0, 0);

est massive. Mais seulement lorsque vous dessinez des images. Lorsque vous remplissez un rectangle, cela fonctionne correctement.

J'ai fait un peu de test et j'ai fait cette page pour illustrer. Les deux premiers sont avec drawImage et un facteur d'échelle de 55 et 55.206143891243606. Ils ont clairement l'air très différents.

Voici deux autres canevas avec les mêmes facteurs d'échelle respectifs et une commande fillRect. Ils ont l'air bien.

http://simonsarris.com/misc/badscale.html

Cela devrait être signalé au suivi des problèmes de chrome. Faites-moi savoir si vous voulez le faire, sinon je le ferai.

Bonne prise, par la voie: D

Source

2010-10-29 01:47:17

J'ai rapporté ici - http://code.google.com/p/chromium/issues/detail?id=61198 –

@ Simon: Salut à nouveau. Honnêtement, je n'ai jamais posté de bug sur un outil de suivi de problèmes de logiciel public, donc il semble que j'ai fait # 61198 dans un mauvais sens. Le bug reste non confirmé. Peut-être que j'ai un mauvais traqueur de problème (peut-être il y a un tracker de problème de Webkit spécial), ou devrais-je promouvoir # 61198 là? Merci d'avance. –

Vous avez fait la bonne chose. Il faut beaucoup de temps pour que beaucoup de bugs soient traités, ils sont très occupés. Dans quelques jours, il pourrait y avoir une mise à jour disant "cc'ing les gens qui savent sur Canvas." Ensuite, cela pourrait prendre des semaines ou des mois avant d'arriver à une solution. Tout ce que vous pouvez faire maintenant, c'est attendre :) –

Webkit canvas drawImage() et le canevas d'un facteur d'échelle not-integer de canevas?

Répondre

Questions connexes