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

js 桌面应用:图像对比工具

  •  
  •   rerender · 2022-05-08 08:29:10 +08:00 · 3114 次点击
    这是一个创建于 962 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们使用之前分享的 ave 库:https://www.v2ex.com/t/842957 开发了一个图像对比工具:

    view-diff

    主要特点 /用法是:

    • C++ 实现的高性能像素对比(流畅支持 4k 图像的对比)

    cpp-opt

    我们没有使用 js 实现的 pixelmatch ,而是将像素对比实现在 C++,速度快了 10 倍多, (300ms ~ 500ms -> 20ms ~ 30ms)。所以即使是对比 4k 图像,允许误差也可以实时调整,用 pixelmatch 就不行。

    4k

    • 和 beyond compare 相比,提供闪烁模式更方便地看图像差别

    blink

    • 自定义主题:极客风

    之前的颜色选择器只演示了明暗主题的切换,这次加上了自定义主题的:

    geek

    • 安装使用更方便

    是单个 exe 文件,用 npm 就能安装使用:npm i -g ave-image-diff

    运行:image-diff

    或者github release下载,压缩后仅 11.9M

    欢迎大家试用~~

    第 1 条附言  ·  2022-06-09 23:20:46 +08:00
    交流群之类的:

    - qq:326315711 or https://jq.qq.com/?_wv=1027&k=6t1BwW4q
    14 条回复    2022-05-13 20:24:48 +08:00
    reorx
        1
    reorx  
       2022-05-08 10:22:01 +08:00 via iPhone   ❤️ 1
    感谢分享,期待生态越做越好
    Buges
        2
    Buges  
       2022-05-08 10:43:58 +08:00 via Android
    看起来是一个类似 duilib 的玩意,不知道支不支持 hidpi 。
    还有 nodejs API 方面可以参考 https://github.com/nodegui/nodegui
    封装出了 react 、vue 、svelte 等不同的版本。
    zhangshine
        3
    zhangshine  
       2022-05-08 11:23:59 +08:00
    好像不是开源的?
    seakingii
        4
    seakingii  
       2022-05-08 12:14:39 +08:00
    这种图像对比一般有什么应用场景?
    imn1
        5
    imn1  
       2022-05-08 15:27:53 +08:00   ❤️ 1
    @seakingii #4
    最广泛是找茬游戏

    实际工业应用很多,或者这样说,基本上时间轴检测图像状态变化的场景都能用
    或者检测原始图片是否经过修改,改了什么部分,诸如此类
    lizhenda
        6
    lizhenda  
       2022-05-08 18:50:09 +08:00
    很厉害啊,JS 开发桌面端的新的选择,希望生态可以更加完善
    rerender
        7
    rerender  
    OP
       2022-05-08 19:50:35 +08:00
    @reorx 谢谢鼓励~
    rerender
        8
    rerender  
    OP
       2022-05-08 19:50:54 +08:00
    @lizhenda 持续努力中。。
    rerender
        9
    rerender  
    OP
       2022-05-08 19:52:55 +08:00
    @zhangshine node 插件和应用都是开源的,node 插件依赖的 c++ sdk 没有开源
    rerender
        10
    rerender  
    OP
       2022-05-08 19:55:52 +08:00
    @Buges

    - hidpi 是原生支持的,就是不用做任何事,默认在高分辨率系统上会自动适应系统的缩放
    - 之前我们也了解了 nodegui 。。还尝试封装了 react 版本的,但是工作量太大了。。我们现在还是继续弄原始的 api 和文档,以及 demo 、这种简单的 app 之类的
    - 和 nodegui 一个可能最大的不同是,我们 ui 库是自研的,所以我们的实现里不需要改 node 运行时,nodegui 他们没法改 qt 估计,所以需要用他们定制的 node 运行时
    Buges
        11
    Buges  
       2022-05-08 20:40:53 +08:00 via Android
    @rerender react 都能复用吧,主要是实现 render 并且封装事件之类的。如果很难封装出 react 的话可能说明原始 API 还不太完善吧,对前端来说回到过去 imperative 的开发方式还是倒车太多。sciter 现在都支持完整 js 及相关生态了。
    node gui 定制 node 运行时主要是把两者的 event loop 合二为一,不是不能改 qt ,只是这样封装 qt 的 API 是最简便的,你们的库本身有不包含 event loop 的 API 自然就不需要了。
    另外这些库比起 qt 等成熟完善的框架很容易踩坑,比如 hidpi (包括动态缩放,把程序窗口拖动到不同 dpi 的屏幕上自动适用新屏幕的缩放比例),再比如 accessibility ,再比如跨平台不同系统特性的一致性等等。
    longbye0
        12
    longbye0  
       2022-05-08 22:54:41 +08:00
    旷视有一个开源的 megspot 。

    使用场景一般是图像视频处理( ai 或传统)前后的对比。
    agee
        13
    agee  
       2022-05-12 10:34:23 +08:00
    @rerender 已 star ave 这个库是我目前看到的,相对比较完善的了,设计也很不错。一点小小的建议,做为一个 ui 库,首先就是颜值,以目前的完成度来说,如果能再配上一套,更漂亮,更现代化一点的组件主题,那推广起来,一定快的多。
    比如这个 https://github.com/lc-ui/lc-design ,样式主题实现就吸引人,只是完成度还不够,但是已经有很多人关注了。
    可以考虑一下,颜值真的相当重要。先要能推广起来,用的人多了,再考虑 react 组件化,依赖社区贡献,还是有可能的。
    rerender
        14
    rerender  
    OP
       2022-05-13 20:24:48 +08:00
    @agee 好的。。谢谢你的建议。。我们之后还是多弄点不同风格的皮肤。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1162 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:29 · PVG 02:29 · LAX 10:29 · JFK 13:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.