濮阳网站建设价格做网站 图片格式

今天需要在某小程序提交一些证明材料，然后处于隐私保护的需要，在每个材料上都加上了水印。

下面是给在线网站添加水印的办法。

1.打开需要添加水印的页面

2.输入水印生成代码

打开控制台界面，输入以下代码，然后回车

// 水印配置参数
const config = {count: 60,            // 水印数量angle: 45, // 旋转角度范围fontSize: '14px',     // 字体大小color: '#cccccc',     // 文字颜色opacity: 0.5,         // 透明度zIndex: 999           // 层叠顺序
};// 创建单个水印元素
function createWatermark() {const watermark = document.createElement('div');watermark.textContent = "仅供招聘申请驿站使用";watermark.style.cssText = `position: fixed;left: ${Math.random() * 100}%;top: ${Math.random() * 100}%;transform: rotate(${config.angle}deg);transform-origin: center center;color: ${config.color};font-size: ${config.fontSize};opacity: ${config.opacity};pointer-events: none;white-space: nowrap;z-index: ${config.zIndex};`;return watermark;
}// 批量创建水印
for (let i = 0; i < config.count; i++) {document.body.appendChild(createWatermark());
}

// 水印配置参数
const config = {count: 20,            // 水印数量angle: 45,            // 统一倾斜角度fontSize: '14px',     // 字体大小color: '#cccccc',     // 文字颜色opacity: 0.5,         // 透明度zIndex: 999,          // 层叠顺序spacing: 200          // 水印间距（像素）
};// 创建单个水印元素
function createWatermark() {const watermark = document.createElement('div');watermark.textContent = "仅供招聘申请驿站使用";watermark.style.cssText = `position: fixed;transform: rotate(${config.angle}deg);transform-origin: center center;color: ${config.color};font-size: ${config.fontSize};opacity: ${config.opacity};pointer-events: none;white-space: nowrap;z-index: ${config.zIndex};user-select: none;`;// 计算有效显示区域（考虑水印尺寸）const viewportWidth = window.innerWidth - 200;  // 预留水印宽度const viewportHeight = window.innerHeight - 50; // 预留水印高度// 生成随机位置（确保在可视区域内）watermark.style.left = `${Math.random() * viewportWidth}px`;watermark.style.top = `${Math.random() * viewportHeight}px`;return watermark;
}// 批量创建水印
function createWatermarks() {// 清除旧水印document.querySelectorAll('[data-watermark]').forEach(el => el.remove());for (let i = 0; i < config.count; i++) {const watermark = createWatermark();watermark.dataset.watermark = 'true'; // 标记水印元素document.body.appendChild(watermark);}
}// 初始化水印
createWatermarks();// 窗口变化时重新生成
window.addEventListener('resize', createWatermarks);

 

3.展示效果

其他页面同理，此处不再赘述。