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

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

接下來(lái)說(shuō)說(shuō),右上角的無(wú)水印下載按鈕是怎么實(shí)現(xiàn)的。
其實(shí)設(shè)計(jì)網(wǎng)站實(shí)現(xiàn)圖片下載,一般由 2 種方式:
第一種: 使用一個(gè)前端庫(kù) dom-to-img 來(lái)實(shí)現(xiàn)
第二種: 使用服務(wù)器 puppeteer 截圖實(shí)現(xiàn)。
第一種方式就是它自帶的按鈕(極速下載測(cè)試版)
第二種服務(wù)端生成:當(dāng)我們點(diǎn)擊上面的(下載帶水印)按鈕,我們可以看到它的 2 個(gè)請(qǐng)求接口,其中有一個(gè)請(qǐng)求帶參數(shù) waterMark 值為 1 ,那么是否是改成 0, 就沒(méi)有水印了呢?
第二個(gè)接口可以通過(guò)第一個(gè)接口返回的 uid,獲得下載圖片的地址。那么我們就可以自己模擬請(qǐng)求這個(gè) 2 個(gè)接口,來(lái)實(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">無(wú)水印下載</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);
})();首先我們通過(guò) require 加入 jquery,方便我們 dom 操作,然后通過(guò)一個(gè)定時(shí)器,在 dom 加載之后,往右上角插入一個(gè)無(wú)水印下載的按鈕。
點(diǎn)擊這個(gè)按鈕,模擬調(diào)用剛才的 2 個(gè)接口,并且發(fā)送參數(shù):bid、圖片的寬度、高度。
bid: 也就是 url 上的 id。- 圖片寬度和高度:也就是頁(yè)面上輸入的值。
最后我們通過(guò)接口返回的圖片地址,使用 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)文章
解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue2.0實(shí)戰(zhàn)之基礎(chǔ)入門(mén)(1)
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)戰(zhàn)第一篇基礎(chǔ)入門(mén)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
前端必知必會(huì)的實(shí)現(xiàn)URL查詢(xún)參數(shù)的方法詳解
URL?參數(shù)查詢(xún)是指在?URL?中使用問(wèn)號(hào)(?)后面附加的鍵值對(duì)參數(shù),本文為大家詳細(xì)介紹了前端實(shí)現(xiàn)URL查詢(xún)參數(shù)的方法,希望對(duì)大家有所幫助2025-02-02
javascript圖片延遲加載實(shí)現(xiàn)方法及思路
這篇文章主要介紹了javascript圖片延遲加載實(shí)現(xiàn)方法及思路,有時(shí)我們需要用懶加載,也就是延遲加載圖片的方式,來(lái)提高網(wǎng)站的親和力,需要的朋友可以參考下2015-12-12
js+html實(shí)現(xiàn)周歲年齡計(jì)算器
這篇文章主要為大家詳細(xì)介紹了js+html實(shí)現(xiàn)周歲年齡計(jì)算器的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06
JavaScript常用函數(shù)工具集:lao-utils
現(xiàn)在Javascript庫(kù)海量,流行的也多,比如jQuery,YUI等,雖然功能強(qiáng)大,但也是不萬(wàn)能的,功能不可能涉及方方面面,這里給大家分享一個(gè)的JS庫(kù)是對(duì)這些的補(bǔ)充,很多也比較實(shí)用,把應(yīng)用到項(xiàng)目中中去也比較方面,這也是對(duì)工作的一些積累,也加深對(duì)知識(shí)的理解。2016-03-03

