javascript - 在 Canvas 上绘制之前向图像添加滤镜

Question

在我的 Canvas 上绘制图像之前，我试图添加一个 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();
    };

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

Answer 1

CSS 滤镜位于图像元素之上，并不是图像本身的一部分，因此当绘制到 Canvas 时，仅使用位图。

幸运的是，现在某些浏览器支持上下文本身的 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";

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