Hinzufügen eines Filters zum Bild vor dem Zeichnen auf Leinwand

Question

Ich versuche, einen CSS-Filter hinzuzufügen, bevor ich das Bild auf meiner Leinwand zeichnen. Das ist mein 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(); 
    }; 

Wenn ich dieses Bild in etwas anderes als die Leinwand laden, rendert es richtig. Aber ich sehe das gesättigte Bild nicht auf meiner Leinwand. Fehle ich etwas? Vielen Dank.

Answer 1

Der CSS-Filter befindet sich oben auf dem Bildelement und ist nicht Teil des Bilds selbst. Wenn Sie also auf Leinwand ziehen, wird nur die Bitmap verwendet.

Glücklicherweise gibt es jetzt in einigen Browsern Unterstützung für CSS-Filter für den Kontext selbst. nach unten bewegen Sie einfach die Zeile für CSS-Filter auf das Bild, um den Kontext wie folgt aus (mit reduziertem Code aus Gründen der Klarheit):

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"; 

Hinweis: nicht in allen Browsern unterstützt, die im Fall muss der Filter angewendet werden manuell und von Grund auf neu.