女朋友换头像比翻书快?我3天肝出一个去水印小程序

我女朋友天天泡小红书,看到好看的图就想当头像。可小红书的图都带水印,她嫌截图裁剪太麻烦。有一天直接甩给我一句:"你是程序员,给我想个办法把水印弄掉!"

得,女朋友发话,那就干呗。花三天时间,整了个去水印的小工具,挺好用。下面就是我怎么一步步搞出来的,有兴趣的可以看看。

先看效果

先给大佬们体验体验【# 去水印下载鸭】>>> nologo.code24.top/ ,移动端访问需要扫码跳转小程序。

电脑端是这样的:

功能亮点

  • 小某书、某音、某手......主流平台的图片、视频都能扒
  • 完全免费,不用登录,打开就用,零广告
  • 复制分享链接→粘贴→秒出无水印素材,一步到位

后端怎么做到的

前端只是壳,真正干活的是后端:拿到分享链接后,靠爬虫把平台返回的数据里"无水印原始地址"抠出来,再回传给你。

我是前端,最顺手的组合是 Node.js + Vue3,既然后端也要有人顶,干脆一把梭:Node 写接口,语法熟、模块多,撸起来嘎嘎快。

举个例子:拿【某信公众号】来练手,它最简单了。

首先想薅无水印的资源,得先摸透平台套路。公众号最"耿直",它直接把无水印原图塞在 HTML 里。打开文章源码,一眼就能看到 window.picture_page_info_list 这个大对象,无水印原图地址全躺在里面。

之前写过一篇文章 Node.js操作Dom ,轻松hold住简单爬虫 文章提到三方库 jsdom,它能把字符串html摸拟成Dom。

复制链接发送请求获取页面 HTML 内容,再转成模拟的 Dom,这样就能使用jquery 获取元素。

javascript 复制代码
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 标签,挨个循环用正则捕获数据。

ini 复制代码
  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 逆向,大多接口做了保密。

最后

本工具仅限于学习,请勿用于其他用途,否则后果自负。

相关推荐
李剑一1 分钟前
AI编程已经如此强大,我们还需要再学习基础嘛?或者说初级程序员还有可能存在吗?
面试
蒜苔肉丝6 分钟前
Vue3 动态表单:模块复用 + 动态增删行 + 数据回显
前端·javascript·vue.js
Cxiaomu21 分钟前
从 TRTC Demo 到独立音视频服务:React + TRTC Web SDK 服务化实践
前端·react.js·音视频
索西引擎29 分钟前
【React】Redux 中间件机制:副作用处理与数据流增强的形式化分析
前端·react.js·中间件
xianjixiance_1 小时前
HarmonyOS应用开发实战:萌宠日记 - json5-配置文件详解
后端
b130538100491 小时前
HarmonyOS应用开发实战:萌宠日记 - 应用启动流程与闪屏页面设计
后端
寒草1 小时前
「寒草呈献」工作六年,是否仍有创造未来的勇气 ✨
前端·后端
HackTwoHub1 小时前
解锁 AI 红队全新玩法!Claude-Red 攻防 Skill 库,内置 SQLi、XXE、文件上传等 Web 专项 Skill,一键导入快速落地渗透实战
前端·人工智能·web安全·网络安全·自动化·系统安全
石小石Orz1 小时前
如何设计一个优秀的 Skills
前端·人工智能
程序员爱钓鱼1 小时前
为什么学习 Go?Go 能做什么?
后端·面试·go