在画布上绘制之前向图像添加滤镜

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

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