我女朋友天天泡小红书,看到好看的图就想当头像。可小红书的图都带水印,她嫌截图裁剪太麻烦。有一天直接甩给我一句:“你是程序员,给我想个办法把水印弄掉!”
得,女朋友发话,那就干呗。花三天时间,整了个去水印的小工具,挺好用。下面就是我怎么一步步搞出来的,有兴趣的可以看看。
先看效果
先给大佬们体验体验>>> https://nologo.code24.top/ ,移动端访问需要扫码跳转小程序。
电脑端是这样的:
功能亮点
小某书、某音、某手……主流平台的图片、视频都能扒
完全免费,不用登录,打开就用,零广告
复制分享链接→粘贴→秒出无水印素材,一步到位
后端怎么做到的
前端只是壳,真正干活的是后端:拿到分享链接后,靠爬虫把平台返回的数据里“无水印原始地址”抠出来,再回传给你。
我是前端,最顺手的组合是 Node.js + Vue3,既然后端也要有人顶,干脆一把梭:Node 写接口,语法熟、模块多,撸起来嘎嘎快。
举个例子:拿【某信公众号】来练手,它最简单了。
首先想薅无水印的资源,得先摸透平台套路。公众号最“耿直”,它直接把无水印原图塞在 HTML 里。打开文章源码,一眼就能看到 window.picture_page_info_list 这个大对象,无水印原图地址全躺在里面。
之前写过一篇文章 Node.js 操作 Dom ,轻松 hold 住简单爬虫 文章提到三方库 jsdom,它能把字符串 html 摸拟成 Dom。
复制链接发送请求获取页面 HTML 内容,再转成模拟的 Dom,这样就能使用jquery 获取元素。
const axios = require('axios');const jquery = require('jquery');const jsdom = require("jsdom");const { JSDOM } = jsdom;
const str2Dom = (html = '') => { if (!html) return; const page = new JSDOM(html); const window = page.window; return window;}
const getHtml = async (url) => { return new Promise((resole, reject) => { axios.get(url, { headers: { 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0', 'sec-ch-ua-platform': "macOS", cookie: 'rewardsn=; wxtokenkey=777' } }).then(res => { resole(res.data) }, err => { reject('') }) })}
const getFileUrl = async (url) => { const window = str2Dom(await getHtml(url)); if (!window) return; let $ = jquery(window); //省略...}
复制代码
获取所有script 标签,挨个循环用正则捕获数据。
const getPicturePageInfoList = ($, reversedScrips) => { const START_STR = 'window.picture_page_info_list = ['; let result = null; $.each(reversedScrips, function (i, script) { let scriptContent = $(script).text() || ''; if (scriptContent.includes(START_STR)) { scriptContent = scriptContent.replace('.slice(0, 20)', '') // 使用正则表达式捕获方括号内的内容 const regex = /window\.picture_page_info_list\s*=\s*(\[.*?\])(?=\s*;|\s*$)/s; const match = scriptContent.match(regex);
if (match && match[1]) { try { const fn = new Function(`return ${match[1]}`); result = fn(); } catch (e) { console.warn('JSON解析失败,返回原始内容:', e); result = match[1]; // 返回原始内容 } } return false; // 跳出each循环 } }) return result;}
const getFileUrl = async (url) => { //省略... let $ = jquery(window); const scrips = $('script'); const reversedScrips = [...scrips].reverse(); const weiXinData = getPicturePageInfoList($, reversedScrips); }
复制代码
这个我们就能得到某信公众号无水印的图片,某信公众号是最简单,基本没做太多防爬虫机制。
其他平台较复杂点,涉及到 js 逆向,大多接口做了保密。
最后
本工具仅限于学习,请勿用于其他用途,否则后果自负。
评论