本文介绍如何利用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去水印的资料请关注本站其它相关文章！