网站 › 『编程语言区』 › ChatGPT网页端预处理配合浏览器实现长图下载

夸克逃逸 发表于 2023-5-26 15:23

ChatGPT网页端预处理配合浏览器实现长图下载

本帖最后由 夸克逃逸 于 2023-5-27 07:40 编辑

需求描述
有一个师姐问我ChatGPT怎么截长图。一开始想很简单吧，谷歌浏览器和Edge浏览器的开发者工具自带截长图的功能，直接使用不就行了嘛。结果发现我想的很简单。

解决思路
有几点，分别如下：
1、将左边侧边栏去掉
2、由于网页设置了over-flow: hidden属性，并且这个属性嵌套设置下来，需要全部都删掉才能让浏览器自带的截长图的功能正常工作
3、将下面的输入框去掉
4、适当的将页面字体加粗，将字体放大，截图后的效果更好

实操
1、开发插件
2、定位左边侧边栏的代码，添加一个style属性：display: none即可。页面下方的输入框同理。


3、对于滚动这个问题，需要将嵌套了好几层的代码的每一行代码的这个class样式都删掉。


4、对于字体样式变化，需要分用户输入和AI生成的内容两类。



其实整个分析过程和开发过程很简单，但是需要注意以下几点：
1、用户输入的内容和AI生成的内容class不一样，需要分别处理，并且不能直接在body上面操作，需要找到包含文本的最直接的那个div元素

演示视频：
【GPT滚动截图辅助插件】 https://www.bilibili.com/video/BV17L411z74w/?share_source=copy_web&vd_source=129e224f53094032a11cf21e89c97c2f

项目地址：
https://github.com/quarkape/gpt-screen-shooter


效果：

夸克逃逸 发表于 2023-5-27 12:05

TesterRoad 发表于 2023-5-27 11:34
先收藏，我用的截长图的工具叫gofullpage

嗯，这个插件也不错。不过我用了一下，对于chatgpt来说，截的图片有左边的侧边栏（包含历史记录数据，比较敏感），还有下方的输入框，整个截图效果质量并不是特别好~

夸克逃逸 发表于 2023-5-28 19:04

三滑稽甲苯 发表于 2023-5-28 07:17
要是能把两侧的大片留白也去掉就好了

因为是调用浏览器自带的截长图功能，自带的功能会截整个浏览器区域宽度，所以两边的留白不太好去，除非把整个文本内容占满网页宽度~

shenshuang 发表于 2023-5-26 15:31

{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}{:1_921:}up厉害啊

xixicoco 发表于 2023-5-26 16:33

这个出错哟，要是有插件就好了

夸克逃逸 发表于 2023-5-26 16:35

xixicoco 发表于 2023-5-26 16:33
这个出错哟，要是有插件就好了

不是有项目地址的吗，项目里面就是浏览器插件啊

chenyeshu 发表于 2023-5-26 18:12

截长图真的很实用

charm1234 发表于 2023-5-26 20:06

点了处理网页后，提示“undefined”，然后截的图不是长图

夸克逃逸 发表于 2023-5-26 21:52

charm1234 发表于 2023-5-26 20:06
点了处理网页后，提示“undefined”，然后截的图不是长图

刷新一下页面，再使用插件

夸克逃逸 发表于 2023-5-26 21:53

chenyeshu 发表于 2023-5-26 18:12
截长图真的很实用

以前从来没碰到过，今天一搜发现好像网上没有挺好的办法

moruye 发表于 2023-5-26 22:31

mikgo 发表于 2023-5-26 23:41

谢谢老哥，挺好用的

查看完整版本: ChatGPT网页端预处理配合浏览器实现长图下载