V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zhwithsweet
V2EX  ›  分享创造

使用 cloudflare workers 做了一些小玩具;比如小红书去水印...

  •  2
     
  •   zhwithsweet · 350 天前 · 3113 次点击
    这是一个创建于 350 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近沉迷使用 hono.js 开发 cloudflare workers. Cloudflare workers 不用多说,赛博菩萨的免费力作;提供了基本的 nodejs API ,比如 fetch / static server 等,甚至支持 puppeteer !玩法有很多。

    Hono 更是社区中比较优秀的轻量级应用的佼佼者,适配了多个云平台,具备基本的代码经验的人几乎是无缝上手,体验也非常优秀。

    本人就使用 hono.js 做了几个,分享一下。如下:

    • 使用 workers browser render API ,实现小红书照片去水印
    • 提取 figma plugin used count
    • 获取私有仓库的 artifacts 产物,实现私仓分发下载

    仓库在此:cofo-workers

    效果图: redbook

    githu

    uno

    14 条回复    2024-03-30 23:05:55 +08:00
    codehz
        1
    codehz  
       350 天前
    话说去水印真的需要用 workers browser render API 吗,如果是静态/ssr 的话,用 HTMLRewriter 应该也可以吧
    zhwithsweet
        2
    zhwithsweet  
    OP
       349 天前
    @codehz #1 要看的,如果你需要的部分是 <ClientOnly /> 的组件,你必须要用 render API 了。据我所知,小红书的图片部分是 <ClientOnly />。如果都是 SSR 的,直接 parse HTML 即可。
    codehz
        3
    codehz  
       349 天前
    你说的对,图片确实不是直接 ssr ,但是提供了 window.__INITIAL_STATE__在末尾
    也就是说你只要提取__INITIAL_STATE__里的数据就可以
    ( curl 之后获取到的信息)
    用 HTMLRewriter 去直接 new HTMLRewriter().on("script")即可获取信息
    节选一段如下
    "imageList":[{"urlDefault":"http:\u002F\u002Fsns-webpic-qc.xhscdn.com\u002F202312081052\u002F640610f27499f2c0de31b46e2cb87443\u002F1040g00830p861vr1k6005n0uvm7haceq0rtl90o!nd_whgt34_nwebp_wm_1","fileId":"","height":1920,"width":1440,"url":"","traceId":"","infoList":
    tifanynic
        4
    tifanynic  
       349 天前
    请问怎么部署呀?直接把 index.js 粘贴到 workers 里吗
    zhwithsweet
        5
    zhwithsweet  
    OP
       349 天前
    @codehz #3 哇 不错的思路,有代码吗?
    zhwithsweet
        6
    zhwithsweet  
    OP
       349 天前
    @tifanynic #4 在 hono.js 的项目里直接执行 pnpm run deploy 即可;在 cloudflare dashboard 里边可以直接贴 index.js
    codehz
        7
    codehz  
       349 天前   ❤️ 1
    @zhwithsweet HTMLRewriter 处理文本节点的时候稍微有点问题,
    可以参考我这个写法去一次性提取全部文本(考虑到你这里只需要提取数据,因此可以省略替换内容的部分,不需要 remove 了)
    https://github.com/codehz/hertz.moe/blob/main/src/TextHandler.ts
    然后提取出 script 字符串之后,只要稍作裁剪,就可以用 JSON.parse 来读取(注意到 cf worker 不让 eval )
    不过我觉得这里甚至可以直接用 regex 来匹配__INITIAL_STATE__=到</script>之间的内容,这样也许更快。
    zhwithsweet
        8
    zhwithsweet  
    OP
       349 天前
    @codehz #3 试了下,curl 里边拿到的 imageList 图片地址是低质量的图片;不过这个思路确实很好。
    zhwithsweet
        9
    zhwithsweet  
    OP
       349 天前
    @codehz #7 可以的,我已经看到它的 defaultImageurl 了
    v2yllhwa
        10
    v2yllhwa  
       348 天前 via Android   ❤️ 1
    我之前写的代码,供参考。

    let getUser = async (url) => {
    let res = await fetch(url);
    let scripts = [];
    let rewriter = new HTMLRewriter()
    .on('script', {
    element(element) {
    scripts.push('');
    },
    text(text) {
    scripts[scripts.length - 1] += text.text;
    },
    })
    .transform(res);
    await rewriter.text();
    let script = scripts.find((script) => script.startsWith('window.__INITIAL_STATE__='));
    script = script.slice('window.__INITIAL_STATE__='.length);
    // replace undefined to null
    script = script.replace(/undefined/g, 'null');
    let state = JSON.parse(script);
    return state.user;
    };
    zhwithsweet
        11
    zhwithsweet  
    OP
       348 天前
    @v2yllhwa #10 nice ,我暂时用的正则直接匹配的。回头试试 rewriter 这个写法
    blueeon
        12
    blueeon  
       348 天前
    workers browser render 是需要申请吗?好不好申请?
    zhwithsweet
        13
    zhwithsweet  
    OP
       347 天前
    @blueeon #12 需要,直接去 discord 联系官方人员加白就行
    RiverRay
        14
    RiverRay  
       236 天前
    很 nice 的想法,谢博主贡献~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1016 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 22:24 · PVG 06:24 · LAX 14:24 · JFK 17:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.