JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
前言
上周微信公眾號(hào)推出了一種新的形式,類似小紅書這樣子,群里有小伙伴調(diào)侃,是否是小紅書的產(chǎn)品經(jīng)理跳槽到微信了,那作為一個(gè)公眾號(hào)運(yùn)營(yíng)者,我也想利用這一點(diǎn)。那么如何快速設(shè)計(jì)出好看的小紅書封面,便成了我的目標(biāo)。我在 google 上搜索到了一篇文章,可以通過一個(gè)好用的網(wǎng)站,比格設(shè)計(jì),設(shè)計(jì)出好看的封面。它跟稿定設(shè)計(jì)一樣,也是一個(gè)在線制圖的網(wǎng)站,當(dāng)然如果你沒開會(huì)員的話,下載下來也是有水印的。那么我在想,是否也可以寫一個(gè)油猴腳本來實(shí)現(xiàn)白嫖呢?
腳本演示
腳本我已經(jīng)寫好了,大家可以自行搜索下載安裝。安裝完成后,設(shè)計(jì)的圖片就沒有水印了,右上角還有一個(gè)免水印按鈕,點(diǎn)擊下載,便可以下載無水印圖片了。

實(shí)現(xiàn)原理
接下來,我們就來說說,這個(gè)腳本的實(shí)現(xiàn)原理。那并不是任何網(wǎng)站都可以破解會(huì)員,是因?yàn)檫@個(gè)網(wǎng)站不夠建全,我們可以利用一些前端知識(shí)來繞過付費(fèi)。
打開 chrome dev tools, 在 HTML 中搜索 water ,我們可以搜索到帶水印的 div,給這個(gè) div 加一個(gè)樣式: display none。就可以實(shí)現(xiàn)去水印了。 原理就是通過這一行代碼實(shí)現(xiàn)去水印了, 現(xiàn)在我們可以使用截圖工具截圖保存即可。

接下來說說,右上角的無水印下載按鈕是怎么實(shí)現(xiàn)的。
其實(shí)設(shè)計(jì)網(wǎng)站實(shí)現(xiàn)圖片下載,一般由 2 種方式:
第一種: 使用一個(gè)前端庫(kù) dom-to-img 來實(shí)現(xiàn)
第二種: 使用服務(wù)器 puppeteer 截圖實(shí)現(xiàn)。
第一種方式就是它自帶的按鈕(極速下載測(cè)試版)
第二種服務(wù)端生成:當(dāng)我們點(diǎn)擊上面的(下載帶水?。┌粹o,我們可以看到它的 2 個(gè)請(qǐng)求接口,其中有一個(gè)請(qǐng)求帶參數(shù) waterMark 值為 1 ,那么是否是改成 0, 就沒有水印了呢?
第二個(gè)接口可以通過第一個(gè)接口返回的 uid,獲得下載圖片的地址。那么我們就可以自己模擬請(qǐng)求這個(gè) 2 個(gè)接口,來實(shí)現(xiàn)這一個(gè)功能。
代碼分析
// ==/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("已加入下載隊(duì)列,請(qǐng)稍候。", 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 操作,然后通過一個(gè)定時(shí)器,在 dom 加載之后,往右上角插入一個(gè)無水印下載的按鈕。
點(diǎn)擊這個(gè)按鈕,模擬調(diào)用剛才的 2 個(gè)接口,并且發(fā)送參數(shù):bid、圖片的寬度、高度。
bid: 也就是 url 上的 id。- 圖片寬度和高度:也就是頁(yè)面上輸入的值。
最后我們通過接口返回的圖片地址,使用 window.open 方法實(shí)現(xiàn)圖片下載。
是不是很簡(jiǎn)單呢?你學(xué)會(huì)了嗎?
以上就是JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能的詳細(xì)內(nèi)容,更多關(guān)于JavaScript去水印的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript異步編程Promise模式的6個(gè)特性
Promise說起來是一個(gè)非常簡(jiǎn)單的概念,即使你沒有機(jī)會(huì)去使用它,很有可能你也了解過它。Promise是一個(gè)非常有價(jià)值的構(gòu)造器,能夠幫助你避免使用鑲套匿名方法,而使用更具有可讀性的方式組裝異步代碼。這里我們將介紹6個(gè)最簡(jiǎn)單的特性,希望對(duì)大家有幫助2014-04-04
如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫詳解
這篇文章主要給大家介紹了關(guān)于如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
JavaScript中this指向機(jī)制與異步回調(diào)解決辦法詳解
this的關(guān)鍵字是JavaScript中最復(fù)雜的機(jī)制之一,它是一個(gè)很特別的關(guān)鍵字,被自動(dòng)定義在所有函數(shù)作用域中,這篇文章主要介紹了JavaScript中this指向機(jī)制與異步回調(diào)解決辦法的相關(guān)資料,需要的朋友可以參考下2026-03-03
Electron點(diǎn)擊穿透不規(guī)則窗體的透明區(qū)域的實(shí)現(xiàn)
本文主要介紹了Electron點(diǎn)擊穿透不規(guī)則窗體的透明區(qū)域的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實(shí)現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06

