Javascript 在画布上绘制之前向图像添加过滤器

我试图在画布上绘制图像之前添加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();
    };

---

如果我将此图像加载到它渲染的画布以外的任何地方，则正确。但我看不到画布上饱和的图像。我错过什么了吗？谢谢。

CSS过滤器位于图像元素的顶部，并且不是图像本身的一部分，因此当绘制到画布时，只使用位图

幸运的是，现在有些浏览器支持针对上下文本身的CSS过滤器。只需将图像上的CSS过滤器行向下移动到如下上下文中（为了清晰起见，减少了代码）：

---

注意：并非所有浏览器都支持此功能，否则必须手动从头开始应用筛选器。

是否有方法在绘制图像后设置筛选器？@AlexKonetchy确定，只需将画布重新绘制为自身：按原样绘制图像，设置筛选器属性，将globalCompositeOperation设置为复制（如果涉及alpha通道）使用带有画布的drawImage作为图像源。好吧，这么说很接近了，但是有办法切换过滤器吗？我把这张图重绘了三次。第一次没有过滤器。第二次使用过滤器。当我第三次复制并绘制画布时，我希望像原始图像一样绘制画布，而不使用过滤器，但每次过滤器都保持在我第二次设置的位置。画布对我来说太新了…@AlexKonetchy在最后一次绘制之前，通过将属性设置为“none”（请参阅onload处理程序中的最后一行）禁用过滤器。还可以使用原始图像（img）作为drawImage的源。我不能，因为我在切换之间的图像上画了一条线。在drawImage（）中设置原始图像将覆盖我绘制的线。

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