在前端怎么实现页面截图和水印在前端怎么实现页面截图背景飞书文档，内容在列表页想要查看内容导出为png 设计类软件，

在前端怎么实现页面截图

背景

飞书文档，内容在列表页想要查看
内容导出为png
设计类软件，出图

以内容导出为png来讲解

医疗，医疗单子
文档，导出png

方案

截图

canvas
puppeteer（无头headless浏览器），无头表格，无头UI
html2canvas（canvas）

上传CDN

全页面截图
局部截图
特定区域截图

落地

截图工具的时候，需要考虑通用型，selector,body,.header,dom

设计具体协议

函数式，组件式
隐藏canvas

代码编写

pnpm i html2canvas

json
{
    "dependecies": {
        "html2canvas": "1.4.1"
    }
}

npm 下毒，"html2canvas"的版本号要写死

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screenshot Example</title>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head>
<body>
    <div id="screenshot-target" style="padding: 20px;background: #f5f5f5;">
        <h1>Hello, World!</h1>
        <p>This is the content to capture</p>
    </div>
    <button onclick="takeScreenshot()">Take screenshot</button>
    <script>
        function takeScreenshot() {
            const element = document.getElementById('screenshot-target');
            html2canvas(element).then(canvas => {
                const img = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.href = img;
                link.download = 'screenshot.png';
                link.click();
            })
        }
    </script>
</body>
</html>

前端添加水印功能

方案

明水印

背景水印

内容生成svg

function createWatermarkSVG(text) {
    const svg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
            <text x="50%" y="50%" dy=".35em" text-anchor="middle" fill="rgb(0,0,0,0.1)" font-size="30" transform="ratate(-45, 100, 100)">${text}</text>
        </svg>
    `;
    return `data:image/svg+xml;base64,${btoa(svg)}`;
}
const watermartText="水印文案";
document.body.style.backgroundImage = `url('${createWatermarkSVG(watermartText)}')`

canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Screenshot Example</title>