视频截图时怎么加动态水印？

东方柯豫提问于 2026-03-28 06:15:23 阅读 5

交互

我正在做一个在线课程平台，需要在用户播放视频时截取画面并自动加上用户名和时间戳作为水印。现在用的是 canvas 把 video 画面 drawImage 出来，但水印文字位置老是不对，而且缩放后模糊得不行。

试过直接在 canvas 上 fillText，也试过先生成一个带水印的 div 再叠加，但导出的图片里都只有视频画面，水印根本没进去。是不是 drawImage 之后的操作没生效？求指点！

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(255,255,255,0.8)';
ctx.fillText('user@example.com | 2024-06-15 14:30', 20, 40);
const imgUrl = canvas.toDataURL('image/png');

我来解答赞 1 收藏

反馈

1 条解答

司徒英瑞 Lv1

看起来你的主要问题是水印位置和清晰度。首先得确保在 drawImage 和 fillText 之间没有遗漏任何步骤。按照规范，canvas 的尺寸应该设置为最终输出的分辨率，而不是依赖视频本身的分辨率。

建议先明确 canvas 尺寸，比如固定为 1920x1080，这样可以避免缩放导致模糊。然后调整文字位置时要考虑画布的实际大小，而不是视频原始尺寸。

还有个小技巧是把水印放在最后绘制，确保它覆盖在视频内容之上。下面是修改后的代码示例：

const canvas = document.createElement('canvas');

canvas.width = 1920;

canvas.height = 1080;

const ctx = canvas.getContext('2d');



// 先处理视频图像

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);



// 设置字体样式

ctx.font = '30px Arial'; // 调整字体大小

ctx.fillStyle = 'rgba(255,255,255,0.8)';



// 文字位置要根据画布大小来定

ctx.fillText('user@example.com | 2024-06-15 14:30', 

             canvas.width - 400, // 右边留空

             canvas.height - 20); // 底部留空



const imgUrl = canvas.toDataURL('image/png');

另外记得检查浏览器兼容性，有些老旧浏览器可能对高清 canvas 支持不太好。这种场景下可以考虑用更专业的视频处理库来做，虽然开发成本会高点，但效果更稳定。

2026-03-28 07:00