Холст toDataURL с CSS webkitFilter

Question

Я применил CSS фильтр на холст так:

canvas.style.webkitFilter = 'hue-rotate(90deg)'; 

Если я затем попытаться загрузить содержимое холста с помощью загрузки атрибута элемента анкера:

var imgData = canvas.toDataURL('image/*'); 
link.download = 'Image'; 
link.href = imgData; 

загруженное изображение не имеет примененного фильтра. Даже если я использую getImageData, чтобы просто просматривать данные изображения или пытаться установить источник изображения в данные изображения, возникает одна и та же проблема. Есть ли в JavaScript, чтобы получить данные изображения холста с применением фильтра CSS?

Answer 1

Вы можете применить Hue-shift в самом холсте.

Например, библиотека CamanJS имеет некоторые хорошие фильтры изображения: http://camanjs.com/

Это из их документации:

Hue

Регулировка оттенка изображения. Его можно использовать для смещения цветов в изображении в едином порядке. Диапазон значений от 0 до 100.

Иногда Hue выражается в диапазоне от 0 до 360. Если это терминологии вы привыкли, думает от 0 до 100, представляющих процента Hue сдвига в 0 до 360.

Пример кода из CamanJS:

Caman("#image", function() { 
     this.hue(90).render(); 
});