油猴脚本去水印实现原理

sxkk20082年前知识分享192

本文同步视频地址

前言

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

脚本演示

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

image.png

实现原理

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

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

image.png

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

其实设计网站实现图片下载,一般由 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 =
          '
' + '

' + content + "

";
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( '无水印下载' ); $("#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 方法实现图片下载。

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

以上就是本期视频的全部内容,感谢给我的观看,我们下期再见。

相关文章

百度人脸融合——AI技术在面部变身中的应用

百度人脸融合——AI技术在面部变身中的应用

  随着人工智能技术的不断发展,百度人脸融合作为其中的一项重要应用,正逐渐成为广大用户喜爱的玩具和工具。人脸融合通过AI技术将用户的面部与他人或特定图像中的面部进行合成,实现...

百度AI语音合成改变了新媒体传播方式

百度AI语音合成改变了新媒体传播方式

  百度AI语音合成是一项创新的技术,在新媒体领域引起了广泛关注和兴趣。随着技术的不断发展和应用,语音合成正在改变着人们获取信息和传播信息的方式。  传统的文本阅读已经悄然淡...

AI绘画动漫—AI技术在动画制作中的应用

AI绘画动漫—AI技术在动画制作中的应用

  随着人工智能技术的不断发展,越来越多的行业开始尝试将其应用于自己的领域。在动画制作领域中,人工智能技术也受到了广泛关注。其中,AI绘画动漫技术的出现,为动画制作注入了全新...

AI识物机器人—让生活更智能化

AI识物机器人—让生活更智能化

  随着科技的不断革新,人工智能技术正在逐渐渗透到我们的生活中。其中一项应用便是AI(人工智能)识物机器人,它的出现不仅仅是一种科技的突破,更是推动了智能化生活的革命,成为了...

小米T300:革新技术的智能扫地机器人

小米T300:革新技术的智能扫地机器人

  随着科技的发展,智能家居产品正逐渐成为人们生活中的重要组成部分。其中,扫地机器人作为一种高效便利的清洁工具,深受人们的喜爱。而小米T300作为小米生态链旗下的智能扫地机器...

行业应用探索:人工智能在医疗领域的创新应用

行业应用探索:人工智能在医疗领域的创新应用

  人工智能作为一种最先进的技术,正日益赋予各行业更高效、更精准的能力。其中,医疗领域作为人工智能的重要应用领域之一,通过结合医学专业知识和机器学习算法,正在推动...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。