Dogod37
V2EX  ›  Java

web 页面转换为实时图片

  •  
  •   Dogod37 · Apr 12, 2021 · 5053 views
    This topic created in 2030 days ago, the information mentioned may be changed or developed.

    请教下各位大神,目前工作中遇到一个需求,就是要在某个页面客户点击某个按钮触发将整个页面生成一个图片格式的留档保存在服务器。图片中是要有客户在页面上已经填写好的信息的。

    后端是 Java,请问这个有什么方式可以实现的吗?

    Supplement 1  ·  Apr 18, 2021
    各位大神说的没有问题,确实是个很蠢的需求。
    保险行业,银保监会文件明确说明要截图或者视频来记录用户在页面上的操作。也给客户提出了其他更优方案,然而并不能说服。

    这玩意,管他视频还是图片, 那不是随便伪造的嘛,也不知道监管那群人一天到晚在想什么。

    最后用 domtoimage 实现了个很简单地截图功能。哎
    27 replies  •  2021-04-15 09:09:11 +08:00
    dallaslu
    dallaslu
    Apr 12, 2021
    1
    图片可以用 js 库生成( html2canvas 或 dom2image )。但是为啥一定要图片呢,数据最终都是要存储在服务器上的,不如直接传文本数据。
    Encloud
    Encloud
    Apr 12, 2021
    2
    之前用过 phantomjs 可以达到你的要求
    timethinker
    timethinker
    Apr 12, 2021
    3
    前端实现就是把整个 dom 转换为图片吧,有一个库叫做 dom-to-image,然后上传到服务器。
    如果想要后端实现的话,想一下,一个网页的构成为 HTML+CSS,这意味着你要在服务器上面渲染一个页面,包括同步客户端上的操作(跟客户端保持一致),很难想象为什么要这样做。后端一般只是单纯的记录日志,比如用户点了啥,这种活动追踪只记录相关的日志信息比较好实现。
    Dogod37
    Dogod37
    OP
    Apr 12, 2021❤️1
    4
    @qwe520liao 监管要求,就离谱
    andersonGzy
    andersonGzy
    Apr 12, 2021
    5
    chrome 插件 FireShot
    Wien
    Wien
    Apr 12, 2021
    6
    可以试试让前端自动截图然后把图片传给后端
    JohnShen927
    JohnShen927
    Apr 12, 2021 via Android
    7
    前端那边截图再传给后端吧。我记得前端有几个第三方库专门实现这个功能来着
    hronro
    hronro
    Apr 12, 2021
    8
    @Dogod37 这个监控不了什么东西吧,像这种不合理的需求,应该直接挡回去,而不是强行找解决方案做出来
    timethinker
    timethinker
    Apr 12, 2021
    9
    也许在客户家里装个监控摄像头更合理一些。[狗头]
    Rheinmetal
    Rheinmetal
    Apr 12, 2021
    10
    监管 /存档 类用途前端生成显然不行 不可信 容易被前端绕过 非要用占空间的前端截图就很弱智 只存 ui 所需状态 然后等要用的时候再渲染一个图片出来糊弄一下?
    PEAL
    PEAL
    Apr 12, 2021
    11
    之前做过类似的,前端逻辑大概就是将 dom 在 canvas 复现出来(很麻烦),然后上传到服务器,快做完的时候产品说太慢了,最后直接后端生成这个图片了。
    所以这个需求很不合理,生成图片这种很浪费资源,不如保存好数据,后端按需生成
    qieqie
    qieqie
    Apr 12, 2021
    12
    脑洞下,写一个网络打印机服务,然后浏览器直接选打印就完事了,0 前端
    clf
    clf
    Apr 12, 2021
    13
    后端应该监控数据请求来自的客户端 ID 、操作时间、IP 地址。

    做的过分一点就是点这个按钮的时候来一遍人脸识别。
    mgzu
    mgzu
    Apr 12, 2021
    14
    可能是保监会要求保存用户选择记录
    IvanLi127
    IvanLi127
    Apr 12, 2021❤️1
    15
    如果可以的话,直接设计稿做底图,再绘制上用户输入的内容,这样可靠些,网页转图片可没那么简单
    CantSee
    CantSee
    Apr 12, 2021
    16
    html 转 pdf?
    WishMeLz
    WishMeLz
    Apr 12, 2021
    17
    本人前端。可以让前端把网页截图下来(有插件),然后上传文件服务器。把连接发送给后端。
    musi
    musi
    Apr 12, 2021❤️1
    18
    本人前端,楼上说的前端截图插件都是有限制的,如果你的页面中有 iframe 或者 canvas,插件就不能很好的工作,后来用了阿里云的 serverless 去做这件事
    ffffb
    ffffb
    Apr 12, 2021
    19
    本人前端。
    在前端转的库,包括但不限于 html2canvas,都是玩具,别用。
    akira
    akira
    Apr 12, 2021
    20
    保存相关数据以后,服务器渲染一份出来就是了啊
    zhw2590582
    zhw2590582
    Apr 12, 2021
    21
    楼上说的库,遇到跨域资源就 GG 了,换个思路,先截个背景图生成 canvas,然后插入动态的值。
    echowuhao
    echowuhao
    Apr 12, 2021 via Android
    22
    保存数据 同样的数据在后端无头浏览器渲染 然后截图保存
    zifangsky
    zifangsky
    Apr 13, 2021
    23
    一般都是前端把数据传到后端后,后端来做这个渲染工作
    futureeent
    futureeent
    Apr 13, 2021
    24
    服务器上无头浏览器渲染,截图
    Dogod37
    Dogod37
    OP
    Apr 13, 2021
    25
    @ffffb 何出此言
    ffffb
    ffffb
    Apr 14, 2021
    26
    @Dogod37 踩坑感悟,市面上的前端方案基本都用过,没有完美方案。
    kasusa
    kasusa
    Apr 15, 2021 via Android
    27
    脑残要求。直接把需要的文字信息存下来不好吗。还能搜索。
    或者干脆让用户手动截图并上传,不传不给下一步。
    问题 x 解决
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5288 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 90ms · UTC 01:26 · PVG 09:26 · LAX 17:26 · JFK 20:26
    ♥ Do have faith in what you're doing.