使用CSS調整大小的圖像創建畫布，並在其上保留瀏覽器插值

Question

我正在嘗試在畫布上繪制一個CSS調整大小的圖像（我使用的是mootools，但這並不重要）：

var width = $('canvas').get('width');
var height = $('canvas').get('height');

$('image').set({ 'width': width, 'height': height });
$('canvas').getContext('2d').drawImage($('image'), 0, 0, width, height);​

在Firefox中一切正常，但在webkit上卻無法正常工作。 FF中的圖像是使用瀏覽器插值繪制的（很好），但是在webkit上沒有插值。

這是小提琴http://jsfiddle.net/a2co/KyhEE/

誰知道我該如何解決這個問題？ 謝謝

編輯：我添加了圖像以快速顯示我想要做什么。

Answer 1

不幸的是，一段時間以來，這在瀏覽器之間可能會有所不同，因為該規范說該規范無關緊要：

如有必要，此規范未定義縮放圖像時要使用的算法。

但請稍候：在Firefox，Webkit，Chrome和IE9中，小提琴的畫布表示形式都是一致的。 我看到的唯一不一致的部分是webkit如何縮放<img> 。 這是Firefox 10，IE9和Chrome 19（從上到下）：

WebKit（Chrome和Safari）在這里很奇怪，它不是Canvas的東西。 僅WebKit中的<img>看起來就不同，所有畫布看起來都一樣！

在過去的幾個月中，Chrome（可能是Webkit）一直在瘋狂改變其抗鋸齒功能（如果您使用chrome的開發人員渠道，這很明顯，因為它在畫布繪制方面經常會以某種方式被破壞）

無論如何，您在這里看到什么不同嗎？ 沒有什么與眾不同的。

編輯：有一個webkit CSS屬性： image-rendering: -webkit-optimize-contrast ，它允許圖像看起來與Canvas一樣糟糕。 這使我相信Canvas在WebKit上的外觀是一個誠實的錯誤。 換句話說，在WebKit中，就好像image-rendering: -webkit-optimize-contrast對於畫布始終處於打開狀態，而無法將其關閉。