キャンバスに描画する前に画像にフィルタを追加する

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

注：すべてのブラウザでサポートされていない場合、フィルタは、手動で適用されなければならないとスクラッチから。