Изменение размера HTML-холста для миниатюр. Можно ли уменьшить пикселизацию и улучшить внешний вид / интерполяцию с измененным размером?

Question

Я начинаю с большого холста, где drawImage() используется для рисования данных из реального изображения в холст HTML.

Позже я создаю миниатюры этого холста / изображения, которые являются намного меньшими элементами холста (по соображениям производительности). Я просто создаю новый холст (ы) с меньшей шириной и высотой и снова использую drawImage(), используя исходный холст для создания эскиза.

На многих платформах результирующее миниатюра изображения выглядит очень пиксельно (PC Chrome, PC Firefox, iOS Safari), но на других, таких как Mac Firefox, изменение размера выполняет интерполяцию намного лучше.

Есть ли какое-нибудь решение, которое может дать мне последовательную интерполяцию? Например, в IE есть собственное свойство CSS, которое можно установить:

object.style.msInterpolationMode = “bicubic”; 

Что-нибудь подобное для других платформ? А конкретно во время неявного изменения размера изображения во время drawImage()? Или любое другое творческое решение приветствуется

Answer 1

К сожалению, короткий ответ заключается в том, что нет встроенного способа.До сих пор разные браузеры реализовывали сглаживание и, возможно, интерполяцию по-разному.

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

Если исходные данные изображения являются растровыми,Значение, нарисованное в точке в целевом прямоугольнике, вычисляется путем фильтрации исходных данных изображения.Пользовательский агент [браузер] может использовать любой алгоритм фильтрации (например, билинейная интерполяция или ближайший сосед).

Выделение мое.Другими словами, браузеры могут свободно реализовывать drawImage по своему усмотрению.К сожалению, для всех, кто надеется на последовательность.

Можно создать собственный алгоритм, используя либо getImageData, либо большое количество вызовов drawImage(), но это будет медленно.