纯前端图片加水印，保证个人信息安全-工具盒子

在各种证件上添加"仅供XX实名认证使用"，防止证件被他人盗用！
最近在办理一些业务时，大多都需要上传个人证件图片，于是就搭建了一个这样工具方便使用，来保护个人信息。

访问地址 {#%E8%AE%BF%E9%97%AE%E5%9C%B0%E5%9D%80}

https://www.wxy97.com/watermark

源代码 {#%E6%BA%90%E4%BB%A3%E7%A0%81}

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="离线全屏水印小工具">
    <link rel="icon" href="https://cdn.wxy97.com/blog/2024-12-13-lqlawxgc.png">
&amp;lt;title&amp;gt;离线全屏水印小工具&amp;lt;/title&amp;gt;
&amp;lt;style&amp;gt;
    body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #ffffff;
    }
@media screen and (max-width: 768px) {
    /* 在小屏幕（例如手机）上应用以下样式 */
    .container {
        width: 80%; /* 80%宽度 */
    }
}

@media screen and (min-width: 769px) {
    /* 在大屏幕（例如电脑）上应用以下样式 */
    .container {
        width: 30%; /* 40%宽度 */
    }
}

.container {
    background-color: #ffffff;
    border-radius: 0px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
    font-size: 14px; /* 设置字体大小为 12 像素 */
}

/* 分割线样式 */
hr {
    border: none;
    border-top: 0.8px solid #ccc; /* 边框颜色淡一些 */
    opacity: 0.3; /* 透明度淡一些 */
    margin: 10px 0;
}

a {
    text-decoration: none; /* 去掉默认下划线 */
    color: #888; /* 设置链接文本颜色为灰色 */
    border-bottom: 1px solid #888; /* 添加底部边框作为下划线效果，并与文本保留一道缝隙 */
    padding-bottom: 1px; /* 增加底部内边距来调整缝隙的大小 */
}

/* 底部版权信息样式 */
footer {
    text-align: center;
    color: #d4d4d4;
    margin-top: 20px;
    width: 100%;

    bottom: 0;
    font-size: 12px; /* 设置字体大小为 12 像素 */
    font-family: Arial, sans-serif;
    line-height: 1.8; /* 设置行高为 1.1 倍 */
}

canvas {
    width: 100%;
    height: 0;
}

h2 {
    text-align: center; /* 设置 h2 标题文本居中对齐 */
}

&amp;lt;/style&amp;gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
&lt;h2&gt;离线添加全屏水印&lt;/h2&gt;&lt;hr&gt;
&lt;!-- 插入水印功能元素 --&gt;
&lt;canvas&gt;&lt;/canvas&gt;
&lt;div&gt;
&lt;input id="upload-input" type="file" accept="image/*"&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;label&gt;
水印文字：
&lt;input id="content" type="text" value="仅供XX实名认证使用"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;label&gt;
水印颜色：
&lt;input id="color" type="color" value="#ffffff"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;label&gt;
不透明度：
&lt;input id="alpha" type="range" min="10" max="100" value="50"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;label&gt;
水印大小比：
&lt;input id="size" type="range" min="1" max="10" value="5"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;label&gt;
水印间隔比：
&lt;input id="gap" type="range" min="20" max="400" value="150"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;label&gt;
水印字体：
&lt;input id="font" type="text"  value="sans-serif"&gt;
&lt;/label&gt;
&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;a href="javascript:alert('请先打开一张图片')" download&gt;保存图片&lt;/a&gt;&lt;br&gt;&lt;br&gt;
&lt;footer&gt;
© &lt;a href="https://www.wxy97.com"&gt;www.wxy97.com&lt;/a&gt; ｜离线全屏水印小工具
&lt;br&gt;&lt;br&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;script&gt;
var img = null;
document.addEventListener('change', function (ev) {
if (ev.target.type === 'file') {
if (!ev.target.files.length) return;
var file = ev.target.files[0];
createBitmap(file, function (result) {
img = result;
repaint()
});
var newName = file.name.split('.');
newName.splice(-1, 0, 'watermarked');
document.getElementsByTagName('a')[0].download = newName.join('.');
} else {
repaint()
}
});
function repaint() {
    if (!img) return;
    var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
    ctx.canvas.width = img.width;
    ctx.canvas.height = img.height;
    var maxSize = Math.max(img.height, img.width);
    ctx.canvas.style.height = (img.height / img.width) * 100 + '%';
    ctx.restore();
    ctx.drawImage(img, 0, 0);
    ctx.fillStyle = document.getElementById('color').value;
    ctx.globalAlpha = document.getElementById('alpha').value / 100;
    var size = (document.getElementById('size').value * maxSize / 100);
    ctx.font = size + 'px &quot;' + document.getElementById('font').value + '&quot;';
    ctx.textBaseline = 'middle';
    ctx.rotate(-45 * Math.PI / 180);
    var gap = size * document.getElementById('gap').value / 100;
    var content = document.getElementById('content').value;
    if (!content.length) return;
    var limit = Math.sqrt(2*(maxSize*maxSize));
    var breaker = ctx.measureText(content).width;
    for (var h = -maxSize, even = false; h &amp;lt;= limit; h += size + gap, even = !even){
        for (var v = -maxSize-(even?breaker/2:0); v&amp;lt;=limit+(even?breaker/2:0); v += breaker + size){
            ctx.fillText(content, v, h);
        }
    }
    document.getElementsByTagName('a')[0].href = ctx.canvas.toDataURL()
}
function createBitmap(blob, callback) {
    var img = document.createElement('img');
    img.addEventListener('load', function () {
        callback(this);
    });
    img.src = URL.createObjectURL(blob);
}

&lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt; &lt;/html&gt;