Добавление фильтра к изображению перед рисованием на холсте

Question

Я пытаюсь добавить фильтр css, прежде чем нарисовать изображение на своем холсте. Это мой javascript.

img = new Image(); 
    img.src = "picture.png"; 
    img.crossOrigin = "Anonymous"; 
    img.style="filter: saturate(8);"; 

    context = canvas.getContext('2d'); 
    context.lineJoin = "round"; 
    context.lineWidth = cursorSize; 
    img.onload = function() { 
     context = canvas.getContext('2d'); 
     context.drawImage(this, 0,0,width,height); 
     layer.draw(); 
    }; 

Если я загружаю это изображение во что-либо иное, кроме холста, которое он отображает, правильно. Но я не вижу насыщенного изображения на моем холсте. Я что-то упускаю? Спасибо.

Answer 1

Фильтр CSS расположен поверх элемента изображения и не является частью самого изображения, поэтому при рисовании на холст используется только растровое изображение.

К счастью, в некоторых браузерах теперь поддерживается поддержка CSS-фильтров для самого контекста. Просто переместите вниз линию для CSS фильтра на изображении в контексте, как это (с уменьшенным кодом для наглядности):

var context = canvas.getContext('2d'); 
var img = new Image(); 
img.onload = function() { 
    context.filter = "saturate(8)";   // use CSS filter here 
    context.drawImage(this, 0, 0, width, height); 
    context.filter = "none";     // reset filter 
}; 
img.src = "picture.png"; 

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