создать холст из изображения с измененным размером 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 рисуется с помощью интерполяции браузера (что хорошо), но в веб-наборе оно не интерполируется.

Вот скрипка http://jsfiddle.net/a2co/KyhEE/

Кто-нибудь знает, как я могу решить проблему? спасибо

редактирование: Я добавил изображение, чтобы быстро показать, что я хочу сделать.

Answer 1

К сожалению, это может не совпадать между браузерами в течение некоторого времени, так как спецификация говорит, что спецификация не заботится:

Эта спецификация не определяет алгоритм, который будет использоваться при масштабировании изображения, еслиобязательно.

Но подождите минуту: представление холста вашей скрипки в Firefox, Webkit, Chrome и IE9 все согласованно.Единственная противоречивая часть, которую я вижу, это то, как веб-набор масштабирует <img>.Вот Firefox 10, IE9 и Chrome 19 (сверху вниз):

WebKit (как Chrome, так и Safari) является странным, и это не вещь Canvas,Один <img> в WebKit выглядит по-разному, все холсты выглядят одинаково!

Chrome (возможно, webkit) безумно менял сглаживание за последние несколько месяцев (это очень очевидно, если вы используете канал для разработчиков)хрома, потому что он часто будет каким-то образом поврежден при рисовании на холсте)

В любом случае вы видите здесь что-то другое?Ничто не выглядит необычно.

Редактировать: Существует свойство CSS webkit: image-rendering: -webkit-optimize-contrast, которое позволяет изображению выглядеть так же плохо, как и Canvas.Это заставляет меня поверить, что то, как выглядит Canvas в WebKit, является честной ошибкой.Другими словами, в WebKit все равно, что image-rendering: -webkit-optimize-contrast всегда включено для холстов, без возможности его выключить.