在画布上绘图之前向图像添加过滤器答案

【问题标题】：Adding a filter to image before drawing on canvas在画布上绘图之前向图像添加过滤器
【发布时间】：2017-02-22 13:52:49
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css canvas html5-canvas

【解决方案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";

注意：并非所有浏览器都支持，以防过滤器必须从头开始手动应用。

【讨论】：

有没有办法在图片绘制好后设置滤镜？
@AlexKonetchy 当然，只需将画布重绘到自身：按原样绘制图像，设置过滤器属性，将 globalCompositeOperation 设置为复制（以防涉及 alpha 通道）并使用带有画布的 drawImage 作为图像源.
好的，就这么接近了，但是有没有办法切换过滤器？我正在重绘图像 3 次。第一次不用滤镜。第二次用过滤器。当我第三次复制和绘制画布时，我想像没有过滤器的原始图像一样绘制它，但每次过滤器都会保持第二次设置的任何值。帆布对我来说太陌生了……
@AlexKonetchy 只是在最后一次绘制之前禁用过滤器，方法是将属性设置为“none”（参见 onload 处理程序中的最后一行）。同样使用原始图像（img）作为drawImage的来源。
我不能，只是因为我在切换之间的图像上画了一条线。在 drawImage() 中设置原始图像会覆盖我画的线。