Javascript &引用；饱和；GlobalComposite操作而不更改透明度？

我有一张画布，在透明的背景上有艺术作品。我这样去饱和：

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

然后发现透明背景变成了不透明的黑色。我不希望饱和混合模式改变alpha通道。。。我做错什么了吗？我目前的解决方案是在去饱和之前复制画布，并用它遮住黑色背景，使其远离去饱和的副本，但这涉及到另一块画布和一个大的绘图。。。不理想。

您可以使用

ctx.filter

2D上下文可用于将各种过滤器应用于画布

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通道

检查支架。 警告。检查页面底部的浏览器支持。如果不支持，则必须使用画布副本来恢复alpha。如果使用

ctx.globalCompositeOperation=“saturation”

则可以使用

ctx.filter

2D上下文可用于将各种过滤器应用于画布

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通道

检查支架。

---

警告。检查页面底部的浏览器支持。如果不支持，则必须使用画布副本来恢复alpha，如果使用

ctx.globalCompositeOperation=“saturation”

混合模式将仅在前景（源）层上工作，而不考虑alpha通道，虽然常规合成操作仅使用alpha通道，但这就是为什么会看到不透明的结果

要解决此问题，只需在使用合成模式“destination out”进行去饱和处理后向现有内容添加“剪辑调用”，然后重新绘制图像：

// draw image 1. time
boardCtx.fillStyle = "#000";
boardCtx.globalCompositeOperation = 'saturation';
boardCtx.fillRect(0, 0, boardCanvas.width, boardCanvas.height);
boardCtx.globalCompositeOperation = 'destination-out';
// draw image again 2. time

这也将恢复原始alpha通道

如果艺术不是图像源，那么您可以通过将画布绘制到临时画布来拍摄快照，然后在使用与上述相同的步骤进行绘制时，将该临时画布用作图像源

你也可以像在另一个答案中一样使用过滤器（还有一个过滤器“灰度”比“饱和”更有效），但目前只有Chrome（来自v52）和Firefox（来自v49）支持

filter

，以及Android上的Webview（来自v52）

/*
CanvasRenderingContext2D.filter（实验性，在标准轨道上）
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter
桌面：
Chrome | Edge | Firefox | IE | Opera | Safari
----------+-----------+-----------+-----------+-----------+-----------
52    |     ?     |    49°    |     -     |     -     |     -
°）35-48：后面的标记canvas.filters.enabled设置为true。
流动电话：
Chrome/A | Edge/mob | Firefox/A | Opera/A | Safari/iOS | Webview/A
----------+-----------+-----------+-----------+-----------+-----------
52    |     ?     |    49°    |     -     |     -     |     52
°）35-48：后面的标记canvas.filters.enabled设置为true。
*/

混合模式将仅在前景（源）层上工作，而不考虑alpha通道，而常规合成操作仅使用alpha通道-这就是为什么您会看到不透明的结果

要解决此问题，只需在使用合成模式“destination out”进行去饱和处理后向现有内容添加“剪辑调用”，然后重新绘制图像：

// draw image 1. time
boardCtx.fillStyle = "#000";
boardCtx.globalCompositeOperation = 'saturation';
boardCtx.fillRect(0, 0, boardCanvas.width, boardCanvas.height);
boardCtx.globalCompositeOperation = 'destination-out';
// draw image again 2. time

这也将恢复原始alpha通道

如果艺术不是图像源，那么您可以通过将画布绘制到临时画布来拍摄快照，然后在使用与上述相同的步骤进行绘制时，将该临时画布用作图像源

你也可以像在另一个答案中一样使用过滤器（还有一个过滤器“灰度”比“饱和”更有效），但目前只有Chrome（来自v52）和Firefox（来自v49）支持

filter

，以及Android上的Webview（来自v52）

/*
CanvasRenderingContext2D.filter（实验性，在标准轨道上）
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter
桌面：
Chrome | Edge | Firefox | IE | Opera | Safari
----------+-----------+-----------+-----------+-----------+-----------
52    |     ?     |    49°    |     -     |     -     |     -
°）35-48：后面的标记canvas.filters.enabled设置为true。
流动电话：
Chrome/A | Edge/mob | Firefox/A | Opera/A | Safari/iOS | Webview/A
----------+-----------+-----------+-----------+-----------+-----------
52    |     ?     |    49°    |     -     |     -     |     52
°）35-48：后面的标记canvas.filters.enabled设置为true。
*/