前端水印

为保证用户隐私、数据安全等

明水印

• 背景图：将有水印的图片作为背景图
• canvas绘制，可以实现动态的效果

function addWatermark(imgEl, text) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.src = imgEl.src;
    img.onload = function () {
        canvas.width = img.width
        canvas.height = img.height
        ctx.drawImage(img, 0, 0)
        ctx.font = '20px Arial'
        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(text, canvas.width / 2, canvas.height / 2)
        imgEl.src = canvas.toDataURL('image/png')
    }
}

• svg

function createWatermarkSVG(text) {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="30px" font-weight="bold" fill="rgba(0, 0, 0, 0.2)">${text}</text>
    </svg>
    `
    return `data:image/svg+xml;base64,${btoa(svg)}`
}

document.body.style.backgroundImage = `url(${createWatermarkSVG('前端水印')})`

暗水印

后端黑科技，将一些信息写入到文件的二进制代码里