canvas2d半透明显黑色问题

huey-LS commented 7 months ago

问题描述

使用render2d的方式播放视频的时候，半透明部分会有黑边

问题原因 https://github.com/yylive/YYEVA-Web/blob/4490851a1d4140c05ab4a4c473e38bafc8c30b50/packages/yyeva/src/player/render/canvas2d/index.ts#L364-L380

比如某个像素点，预期颜色为 rgba(255,0,0,0.5), 即50%透明度的红色。在视频填充黑色的背景后取出来的颜色为 rgba(127,0,0,1)。 127 是 255 0.5 + 0 0.5, 黑色的rgb为0。此时只改透明度，就会偏黑，需要复原到255，再添加透明度。

我这里想修改成：

const opacity =  alpathImageData.data[i - 1];
const opacityRate = opacity / 255;
colorImageData.data[i - 1] = Math.min(255, colorImageData.data[i - 1] / opacityRate);
colorImageData.data[i - 2] = Math.min(255, colorImageData.data[i - 2] / opacityRate);
colorImageData.data[i - 3] = Math.min(255, colorImageData.data[i - 3] / opacityRate);
colorImageData.data[i] = opacity;

这样rgb能复原成原始值，避免黑边. 可以的话，我提一个pr.

alexhaifeng commented 3 months ago

感谢反馈，按照你的思路加了容错处理，已经在1.0.6版本修复

ckken commented 3 months ago

nice

yylive / YYEVA-Web

canvas2d半透明显黑色问题 #20