| JavaScript怎么用油猴脚本实现去水印功能 | 您所在的位置：网站首页 › iphone怎么用油猴 › JavaScript怎么用油猴脚本实现去水印功能 |
JavaScript怎么用油猴脚本实现去水印功能
|
JavaScript怎么用油猴脚本实现去水印功能
发布时间：2023-03-10 10:26:31
来源：亿速云
阅读：89
作者：iii
栏目：开发技术
这篇文章主要介绍“JavaScript怎么用油猴脚本实现去水印功能”，在日常操作中，相信很多人在JavaScript怎么用油猴脚本实现去水印功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript怎么用油猴脚本实现去水印功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！ 实现原理接下来，我们就来说说，这个脚本的实现原理。那并不是任何网站都可以破解会员，是因为这个网站不够建全，我们可以利用一些前端知识来绕过付费。 打开 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/[email protected]/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 方法实现图片下载。 到此，关于“JavaScript怎么用油猴脚本实现去水印功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！ 推荐阅读： JavaScript深浅拷贝的介绍 Reduce怎么在JavaScript中使用免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。 javascript 上一篇新闻：pytorch网络模型构建场景的问题如何解决 下一篇新闻：Electron电源状态管理的方法是什么 猜你喜欢 vue数组对象怎么定义 vue下怎么获取map中的值 vue怎么定义缩进 vue的路由怎么创建 vue下怎么切换路由 vue监听变量的方法是什么 vue标签怎么隐藏 vue构造函数怎么使用 vue执行外部函数的方法是什么 vue下怎么让函数只执行一次 |
【本文地址】