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（）和畫布非整數比例因子錯誤？

回答

相關問題