javascript - 在不更改透明度的情况下“饱和” globalCompositeOperation？

我有一块包含透明背景上的艺术品的画布。我像这样去饱和：

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

并发现透明背景已变为不透明黑色。我不希望饱和度混合模式会更改Alpha通道...我做错了什么吗？我当前的解决方案是在饱和度降低之前复制画布，并使用它来遮盖饱和度降低的副本的黑色背景，但这涉及到另一张画布和大笔画...不理想。

最佳答案

您可以使用ctx.filter

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

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

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

修复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通道被修改。

检查支持。

警告。在filter页面底部检查浏览器支持。如果不支持，则使用ctx.globalCompositeOperation = "saturation"时，您将不得不使用画布的副本来还原Alpha。