JavaScript利用油猴脚本实现去水印功能
本文介绍如何利用JavaScript编写油猴脚本,去除在线设计网站(如比格设计)图片的水印。通过DOM操作隐藏水印元素,并模拟服务端接口请求获取无水印图片地址,实现免费下载高清封面图的功能。
前言
近期微信公众号推出了类似小红书的图文展示形式,引发社区讨论。作为公众号运营者,为了快速制作精美的封面图,我尝试寻找解决方案。通过搜索发现,比格设计等在线制图平台提供了丰富的模板,但非会员下载时图片带有水印。为此,我尝试编写一个油猴脚本,以解决这一痛点。
脚本演示
脚本已完成开发,用户可自行搜索并安装。安装后,页面中的水印将自动消失,右上角会出现“免水印”下载按钮。点击该按钮即可直接下载无水印的高清图片。

实现原理
该脚本并非针对所有网站有效,而是利用了部分网站前端安全机制的不足。通过前端技术手段,我们可以绕过付费限制,实现去水印效果。
首先,打开Chrome开发者工具,在HTML结构中搜索 water 关键字。定位到包含水印的div元素后,为其添加CSS样式:display none。这样即可在视觉上隐藏水印。完成此步骤后,使用截图工具保存即可得到无水印图片。

接下来,介绍如何生成右上角的无水印下载按钮。
通常,在线设计网站提供图片下载主要有两种技术路径:
第一种方式是利用前端库 dom-to-img 将DOM元素转换为图片。
第二种方式是通过服务器端使用 puppeteer 进行截图生成。
网站自带的“极速下载测试版”按钮采用的是第一种前端转换方式。
对于第二种服务端生成方式,当我们点击“下载带水印”按钮时,可以观察到两个网络请求。其中一个请求携带参数 waterMark 且值为 1。通过测试发现,若将该参数值修改为 0,服务器将返回无水印的图片数据。
第二个接口利用第一个接口返回的 uid 参数,进一步获取最终图片的下载链接。因此,我们可以通过脚本模拟这两个接口的请求流程,从而完整实现无水印下载功能。
代码分析
// ==/UserScript==
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
// @license MIT
// ==/UserScript==
(function () {
"use strict";
GM_addStyle(`.water,.water-tip{display:none!important}`);
const toast = (content, time) => {
return new Promise((resolve, reject) => {
let elAlertMsg = document.querySelector("#fehelper_alertmsg");
if (!elAlertMsg) {
let elWrapper = document.createElement("div");
elWrapper.innerHTML =
'<div id="fehelper_alertmsg" style="position:fixed;top:100px;left:0;right:0;z-index:1000;display:flex">' +
'<p style="background:#4caf50;display:inline-block;color:#fff;text-align:center;' +
'padding:10px 10px;margin:0 auto;font-size:14px;border-radius:4px;">' +
content +
"</p></div>";
elAlertMsg = elWrapper.childNodes[0];
document.body.appendChild(elAlertMsg);
} else {
elAlertMsg.querySelector("p").innerHTML = content;
elAlertMsg.style.display = "flex";
}
window.setTimeout(function () {
elAlertMsg.style.display = "none";
resolve && resolve();
}, time || 1000);
});
};
const headers = {
Authorization: `Token ${localStorage.getItem("__token__")}`,
};
function requestDownload(id) {
toast("已加入下载队列,请稍候。", 2000).then(() => {
$.ajax({
method: "GET",
url: `/new/udesign/checkdownload/${id}`,
headers,
dataType: "json",
}).then((res) => {
if (res.code === 203) {
requestDownload(id);
return false;
}
window.open(res.data.url, "_blank");
});
});
}
setTimeout(() => {
const container = document.querySelectorAll(".ant-space-item")[10];
$(container)
.css({ display: "flex" })
.append(
'<buttton id="tm-download" style="margin-left: 8px;align-items: center;display: flex;height: 48px;" class="ant-btn ant-btn-primary">无水印下载</button>'
);
$("#tm-download").on("click", () => {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const bid = urlParams.get("bid");
$.ajax({
method: "GET",
url: `/new/udesign/downloadAsync/${bid}`,
headers,
dataType: "json",
data: {
width: parseInt($(".canvas-view-item").text()),
height: parseInt($(".canvas-view-item:eq(1)").text()),
id: bid,
format: "png",
watermark: 0,
role_type: 3,
preview_path: "/bill/output",
fast_download: false,
},
}).then((res) => {
console.log(res);
requestDownload(res.data.uid);
});
});
}, 1000);
})();脚本首先通过 require 引入 jquery,以简化DOM操作。随后设置定时器,等待页面DOM加载完成后,在右上角动态插入一个“无水印下载”按钮。
点击该按钮时,脚本会模拟调用前述的两个接口,并传递关键参数:bid、图片宽度及高度。
bid:即 URL 中的 id。- 图片宽度和高度:对应页面中输入的尺寸数值。
最后,利用接口返回的图片地址,通过 window.open 方法触发浏览器下载图片。
整个过程逻辑清晰,实现起来相对简单。希望读者能从中掌握相关技巧。
以上就是JavaScript利用油猴脚本实现去水印功能的详细内容,更多关于JavaScript去水印的资料请关注本站其它相关文章!
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
