JavaScript怎么用油猴腳本實現(xiàn)去水印功能

這篇文章主要介紹“JavaScript怎么用油猴腳本實現(xiàn)去水印功能”，在日常操作中，相信很多人在JavaScript怎么用油猴腳本實現(xiàn)去水印功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript怎么用油猴腳本實現(xiàn)去水印功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

實現(xiàn)原理

接下來，我們就來說說，這個腳本的實現(xiàn)原理。那并不是任何網(wǎng)站都可以破解會員，是因為這個網(wǎng)站不夠建全，我們可以利用一些前端知識來繞過付費。

打開 chrome dev tools, 在 HTML 中搜索 water ，我們可以搜索到帶水印的 div，給這個 div 加一個樣式： display none。就可以實現(xiàn)去水印了。 原理就是通過這一行代碼實現(xiàn)去水印了， 現(xiàn)在我們可以使用截圖工具截圖保存即可。

接下來說說，右上角的無水印下載按鈕是怎么實現(xiàn)的。

其實設(shè)計網(wǎng)站實現(xiàn)圖片下載，一般由 2 種方式：

第一種： 使用一個前端庫 dom-to-img 來實現(xiàn)

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

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

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

第二個接口可以通過第一個接口返回的 uid，獲得下載圖片的地址。那么我們就可以自己模擬請求這個 2 個接口，來實現(xiàn)這一個功能。

代碼分析

// ==/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" >' +
          '<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"  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 加載之后，往右上角插入一個無水印下載的按鈕。

點擊這個按鈕，模擬調(diào)用剛才的 2 個接口，并且發(fā)送參數(shù)：bid、圖片的寬度、高度。

• bid： 也就是 url 上的 id。

• 圖片寬度和高度：也就是頁面上輸入的值。

最后我們通過接口返回的圖片地址，使用 window.open 方法實現(xiàn)圖片下載。

到此，關(guān)于“JavaScript怎么用油猴腳本實現(xiàn)去水印功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>