博客 / 詳情

返回

女朋友換頭像比翻書快?我3天肝出一個去水印小程序

我女朋友天天泡小紅書,看到好看的圖就想當頭像。可小紅書的圖都帶水印,她嫌截圖裁剪太麻煩。有一天直接甩給我一句:“你是程序員,給我想個辦法把水印弄掉!”
得,女朋友發話,那就幹唄。花三天時間,整了個去水印的小工具,挺好用。下面就是我怎麼一步步搞出來的,有興趣的可以看看。

先看效果

先給大佬們體驗體驗>>> https://nologo.code24.top/ ,移動端訪問需要掃碼跳轉小程序。
電腦端是這樣的:

image.png

功能亮點

小某書、某音、某手……主流平台的圖片、視頻都能扒
完全免費,不用登錄,打開就用,零廣告
複製分享鏈接→粘貼→秒出無水印素材,一步到位

後端怎麼做到的

前端只是殼,真正幹活的是後端:拿到分享鏈接後,靠爬蟲把平台返回的數據裏“無水印原始地址”摳出來,再回傳給你。
我是前端,最順手的組合是 Node.js + Vue3,既然後端也要有人頂,乾脆一把梭:Node 寫接口,語法熟、模塊多,擼起來嘎嘎快。
舉個例子:拿【某信公眾號】來練手,它最簡單了。
首先想薅無水印的資源,得先摸透平台套路。公眾號最“耿直”,它直接把無水印原圖塞在 HTML 裏。打開文章源碼,一眼就能看到 window.picture_page_info_list 這個大對象,無水印原圖地址全躺在裏面。

image.png

之前寫過一篇文章 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 逆向,大多接口做了保密。

最後

本工具僅限於學習,請勿用於其他用途,否則後果自負。

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.