反转画布图像的 alpha 值

Question

反转画布内容的 Alpha 通道的最佳方法是什么？

我已经看到诸如this one 之类的解决方案，您可以在其中逐像素检查并重新映射 alpha 值，但这是一项昂贵的操作，我希望可能会有更高性能的东西（或更好的实践）方法，例如使用context.filter 或类似的方法。

作为一个简化示例，给定这张图片，其中所有像素都具有相同的 RGB 通道（黑色）值，但 alpha 通道值不同：

我想生成这张 RGB 通道不变的图像：

请注意，原始图像和最终图像中存在一定范围的 alpha 值。

Answer 1

我们可以使用globalCompositeOperation 用alpha 反转颜色。

1. 具有径向渐变的源图像。

2. 具有反转 alpha 的结果图像。

3. 检查结果：在黄色背景上绘制结果图像

const src_canvas = document.querySelector('canvas#source');
const src_ctx = src_canvas.getContext('2d');

const result_canvas = document.querySelector('canvas#result');
const result_ctx = result_canvas.getContext('2d');

const check_canvas = document.querySelector('canvas#check');
const check_ctx = check_canvas.getContext('2d');

const w = src_canvas.width = result_canvas.width = check_canvas.width = 180;
const h = src_canvas.height = result_canvas.height = check_canvas.height = 180;

const gradient = src_ctx.createRadialGradient(w/2,h/2,0, w/2,h/2,w/3);
gradient.addColorStop(0, 'rgba(0,0,0,1)');
gradient.addColorStop(1, 'rgba(0,0,0,0)');

src_ctx.fillStyle = gradient;
src_ctx.fillRect(0,0,w,h);

result_ctx.drawImage(src_canvas,0,0);
result_ctx.globalCompositeOperation = 'source-out';
result_ctx.fillRect(0,0,w,h); // uses default fillStyle = 'black'

check_ctx.fillStyle = 'yellow'; // to check if the figure isn't fully opaque
check_ctx.fillRect(0,0,w,h);

check_ctx.drawImage(result_canvas,0,0);

<canvas id="source"></canvas>
<canvas id="result"></canvas>
<canvas id="check"></canvas>

只有当 渐变的底色（您的透明图像）和应用globalCompositeOperation="source-out" 后的fillStyle 的颜色 相同时才有效。如果您的透明图像中有不同的颜色 - 它不会起作用。

我将黑色作为透明图像rgba(0,0,0,...) 的基色，并将黑色作为result_ctx.fillRect(0,0,w,h) 时的默认填充色。例如，如果源图像的基色是红色（'rgba(255,0,0,...)'），那么我们必须在 fillRect() 之前显式定义它 -> result_ctx.fillStyle = 'red' ('rgb(255,0,0)');