视频截图加水印怎么实现？canvas绘制有问题

程序猿庆玲提问于 2026-03-03 04:03:21 阅读 4

交互

我用video标签播放视频，想在用户点击截图时把当前画面转成带水印的图片。但水印文字总是显示不出来，或者位置不对，是不是drawImage和fillText的顺序有问题？

我试过先画视频帧再写文字，也试过反过来，但要么水印被覆盖，要么根本看不到。下面是我现在的代码：

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 = 'white';
ctx.fillText('© MySite', 10, 30);

截图水印

我来解答赞 3 收藏

反馈

暂无解答