js实现水印清除
清除网页水印的JavaScript方法
方法一：移除DOM元素
通过检查页面元素结构定位水印元素并移除。常见水印可能包含特定类名或ID：
document.querySelectorAll('.watermark, .water-mark, #watermark').forEach(el => el.remove());方法二：修改CSS样式
若水印通过CSS实现，可覆盖相关样式属性：
const style = document.createElement('style');
style.innerHTML = `
[class*="watermark"], [id*="watermark"] {
display: none !important;
opacity: 0 !important;
}
`;
document.head.appendChild(style);方法三：处理Canvas水印
对于Canvas绘制的水印，需重写绘图方法：
const originalFillText = CanvasRenderingContext2D.prototype.fillText;
CanvasRenderingContext2D.prototype.fillText = function(...args) {
if (!/watermark/i.test(args[0])) {
originalFillText.apply(this, args);
}
};方法四：拦截图片请求
针对动态加载的水印图片：
const originalCreateElement = document.createElement;
document.createElement = function(tagName) {
const el = originalCreateElement.call(document, tagName);
if (tagName.toLowerCase() === 'img') {
el.addEventListener('load', function() {
if (/watermark/.test(this.src)) this.style.display = 'none';
});
}
return el;
};注意事项
- 部分网站使用SVG或WebGL实现水印，需针对性处理
- 清除水印可能违反网站使用条款
- 某些水印采用背景重复平铺方式，需同时处理background-image属性
完整示例代码
(function() {
// DOM元素清除
document.querySelectorAll('[class*="mark"],[id*="mark"]').forEach(el => {
if (/water|logo|signature/i.test(el.className + el.id)) el.remove();
});
// CSS样式覆盖
const style = document.createElement('style');
style.innerHTML = `
.watermark-layer, .protected-content {
pointer-events: auto !important;
user-select: auto !important;
}
`;
document.head.append(style);
// Canvas处理
if (window.CanvasRenderingContext2D) {
const textMethods = ['fillText', 'strokeText'];
textMethods.forEach(method => {
const original = CanvasRenderingContext2D.prototype[method];
CanvasRenderingContext2D.prototype[method] = function(text, ...args) {
if (!/watermark|copyright/i.test(text)) original.call(this, text, ...args);
};
});
}
})();
