javascript - "saturation"globalCompositeOperation 不改变透明度？

Question

我有一个 Canvas ，其中包含透明背景上的艺术。我像这样降低饱和度:

boardCtx.fillStyle = "rgba(0, 0, 0, 1.0)";
boardCtx.globalCompositeOperation = 'saturation';
boardCtx.fillRect(0, 0, boardCanvas.width, boardCanvas.height);

发现透明背景变成了不透明的黑色。我不希望饱和度混合模式改变 Alpha channel ...我做错了什么吗？我当前的解决方案是在去饱和之前复制 Canvas ，并用它来掩盖黑色背景，使其远离去饱和副本，但这涉及另一个 Canvas 和大画......并不理想。

Answer 1

您可以使用ctx.filter

2D 上下文 filter可用于将各种滤镜应用于 Canvas 。

ctx.filter = "saturate(0%)";
ctx.drawImage(ctx.canvas,0,0);

但是如果存在抗锯齿/透明度，这会增加 Alpha，从而降低质量。

修复阿尔法

要修复您需要使用 ctx.globalCompositeOperation = "copy"操作。

ctx.filter = "saturate(0%)";
ctx.globalCompositeOperation = "copy";
ctx.drawImage(ctx.canvas,0,0);

// restore defaults;
ctx.filter = "";
ctx.globalCompositeOperation = "source-over";

这将阻止 Alpha channel 被修改。

检查支持。

警告。检查 filter 底部的浏览器支持页。如果不支持，如果您使用 ctx.globalCompositeOperation = "saturation"，则必须使用 Canvas 的副本来恢复 Alpha。