JavaScript利用油猴脚本实现去水印功能

 更新时间:2023年03月10日 09:46:33   作者:狂奔滴小马  
这篇文章主要为大家详细介绍了JavaScript如何利用油猴脚本实现去水印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

前言

上周微信公众号推出了一种新的形式,类似小红书这样子,群里有小伙伴调侃,是否是小红书的产品经理跳槽到微信了,那作为一个公众号运营者,我也想利用这一点。那么如何快速设计出好看的小红书封面,便成了我的目标。我在 google 上搜索到了一篇文章,可以通过一个好用的网站,比格设计,设计出好看的封面。它跟稿定设计一样,也是一个在线制图的网站,当然如果你没开会员的话,下载下来也是有水印的。那么我在想,是否也可以写一个油猴脚本来实现白嫖呢?

脚本演示

脚本我已经写好了,大家可以自行搜索下载安装。安装完成后,设计的图片就没有水印了,右上角还有一个免水印按钮,点击下载,便可以下载无水印图片了。

实现原理

接下来,我们就来说说,这个脚本的实现原理。那并不是任何网站都可以破解会员,是因为这个网站不够建全,我们可以利用一些前端知识来绕过付费。

打开 chrome dev tools, 在 HTML 中搜索 water ,我们可以搜索到带水印的 div,给这个 div 加一个样式: display none。就可以实现去水印了。 原理就是通过这一行代码实现去水印了, 现在我们可以使用截图工具截图保存即可。

接下来说说,右上角的无水印下载按钮是怎么实现的。

其实设计网站实现图片下载,一般由 2 种方式:

第一种: 使用一个前端库 dom-to-img 来实现

第二种: 使用服务器 puppeteer 截图实现。

第一种方式就是它自带的按钮(极速下载测试版)

第二种服务端生成:当我们点击上面的(下载带水印)按钮,我们可以看到它的 2 个请求接口,其中有一个请求带参数 waterMark 值为 1 ,那么是否是改成 0, 就没有水印了呢?

第二个接口可以通过第一个接口返回的 uid,获得下载图片的地址。那么我们就可以自己模拟请求这个 2 个接口,来实现这一个功能。

代码分析

// ==/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 加载之后,往右上角插入一个无水印下载的按钮。

点击这个按钮,模拟调用刚才的 2 个接口,并且发送参数:bid、图片的宽度、高度。

  • bid: 也就是 url 上的 id。
  • 图片宽度和高度:也就是页面上输入的值。

最后我们通过接口返回的图片地址,使用 window.open 方法实现图片下载。

是不是很简单呢?你学会了吗?

以上就是JavaScript利用油猴脚本实现去水印功能的详细内容,更多关于JavaScript去水印的资料请关注脚本之家其它相关文章!

相关文章

  • 6种JavaScript继承方式及优缺点(小结)

    6种JavaScript继承方式及优缺点(小结)

    这篇文章主要介绍了6种JavaScript继承方式及优缺点(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    Js判断参数(String,Array,Object)是否为undefined或者值为空

    在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空。如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型,通过 JSON.stringify(data) 进行序列化后再传递
    2013-11-11
  • Typescript tipe freshness 更严格对象字面量检查

    Typescript tipe freshness 更严格对象字面量检查

    这篇文章主要为大家介绍了Typescript tipe freshness 更严格对象字面量检查,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 详解实现一个通用的“划词高亮”在线笔记功能

    详解实现一个通用的“划词高亮”在线笔记功能

    这篇文章主要介绍了实现一个通用的“划词高亮”在线笔记文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript中RegExp保留小数点后几位数的方法分享

    javascript中RegExp保留小数点后几位数的方法分享

    文章介绍一篇关于javascript中RegExp保留小数点后几位数方法,有需要了解的朋友可以参考一下
    2013-08-08
  • 微信小程序Flex布局用法深入浅出分析

    微信小程序Flex布局用法深入浅出分析

    这篇文章主要介绍了微信小程序Flex布局用法,深入浅出地罗列分析了flex弹性布局常见的属性、功能及使用方法,需要的朋友可以参考下
    2019-04-04
  • JavaScript中关于e.keycode的使用

    JavaScript中关于e.keycode的使用

    这篇文章主要介绍了JavaScript中关于e.keycode的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • 深入了解Hybrid App技术的相关知识

    深入了解Hybrid App技术的相关知识

    这篇文章主要介绍了深入了解Hybrid App技术的相关知识,Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
    2019-07-07
  • js数组转json并在后台对其解析具体实现

    js数组转json并在后台对其解析具体实现

    这篇文章主要介绍了js数组转json并在后台对其解析具体实现,有需要的朋友可以参考一下
    2013-11-11
  • 微信小程序开发中生命周期的详细介绍

    微信小程序开发中生命周期的详细介绍

    生命周期是指一个对象从创建→>运行>销毁的整个阶段,强调的是一个时间段,文中介绍了小程序中组件的生命周期,需要的朋友可以参考下
    2023-03-03

最新评论