Webkit画布drawImage（）和画布非整数比例因子错误？

如果在已经没有整数比例因子的画布上绘制图像，我已经遇到了canvas上下文drawImage（）方法的问题。看起来，这些图像是以一种奇怪的方式剪辑的（有时图像的最右侧部分被剪切，有时是最底部的，有时是两者）。至少在Google Chrome 6（至少是稳定版），Chromium 6，甚至是最新的（dev-）版本，甚至Safari 5中都会出现这个问题。Firefox没有这个bug。显然，如果我没有错，这是一个Webkit问题。让我们来看看下面的代码（用于演示提供了全部代码）：Webkit画布drawImage（）和画布非整数比例因子错误？

<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>

因此，它是一个真正的错误吗？或者是否有任何解决方法？

在此先感谢。

UPD：

让我们考虑一下，我们有以下的Base64编码的3x5的图像：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAEklEQVR42mP4z8DwH4YZyOAAAMufHeNmMS0JAAAAAElFTkSuQmCC

来源

2010-10-28 Lyubomyr Shaydariv

你可以给我们一个图像作为数据：image/png; base64，？ – 2010-10-28 16:13:59

@Simon Sarris：我不确定它是否是一个完美的base64，因为我迟到了，现在很匆忙。希望我没有错。请参阅更新。 – 2010-10-28 18:41:01

我肯定是在重现你所看到的问题（用我自己的形象） – 2010-10-28 19:55:48

你说得对，这是一个错误。

的差异

和

之间

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

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

是巨大的。但只在绘制图像时。填充矩形时，它可以正常工作。

我做了一些测试，并在此页面上进行说明。前两名是drawImage，比例系数是55和55.206143891243606。他们显然非常不同。

下面是两个具有相同比例因子和fillRect命令的画布。他们看起来很好。

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

这应当报铬问题跟踪。让我知道你是否想做，否则我会做。

好的，顺便说一下：D

来源

2010-10-29 01:47:17

我已经在这里报告 - http://code.google.com/p/chromium/issues/detail?id=61198 – 2010-10-29 08:22:14

@Simon：嗨，再次。老实说，我从来没有向任何公共软件问题跟踪器发布任何错误，所以我似乎以某种错误的方式完成了＃61198。该错误仍然未得到证实。也许我有一个错误的问题跟踪器（也许有一些特殊的Webkit问题跟踪器），或者我应该在那里推广＃61198？提前致谢。 – 2010-11-01 08:09:09

你做得对。需要很长时间才能得到回应，他们非常忙碌。几天之后，可能会有一个更新说“收集了解Canvas的人”。然后，他们可能需要数周或数月才能找到解决方案。你现在所能做的就是等待:) – 2010-11-01 15:12:45

Webkit画布drawImage（）和画布非整数比例因子错误？

回答

相关问题