快捷導(dǎo)航

JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能

更新時(shí)間：2023年03月10日 09:46:33 作者：狂奔滴小馬

這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

上周微信公眾號(hào)推出了一種新的形式，類似小紅書這樣子，群里有小伙伴調(diào)侃，是否是小紅書的產(chǎn)品經(jīng)理跳槽到微信了，那作為一個(gè)公眾號(hào)運(yùn)營者，我也想利用這一點(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è)前端庫 dom-to-img 來實(shí)現(xiàn)

第二種：使用服務(wù)器 puppeteer 截圖實(shí)現(xiàn)。

第一種方式就是它自帶的按鈕（極速下載測試版）

第二種服務(wù)端生成：當(dāng)我們點(diǎn)擊上面的（下載帶水?。┌粹o，我們可以看到它的 2 個(gè)請求接口，其中有一個(gè)請求帶參數(shù) waterMark 值為 1 ，那么是否是改成 0，就沒有水印了呢？

第二個(gè)接口可以通過第一個(gè)接口返回的 uid，獲得下載圖片的地址。那么我們就可以自己模擬請求這個(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ì)列，請稍候。", 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、圖片的寬度、高度。