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

夸克逃逸

需求描述
有一个师姐问我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/B ... 032a11cf21e89c97c2f

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


效果：

夸克逃逸

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

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

夸克逃逸

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

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

shenshuang

up厉害啊

xixicoco

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

夸克逃逸

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

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

chenyeshu

截长图真的很实用

charm1234

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

夸克逃逸

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

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

夸克逃逸

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

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

mikgo

谢谢老哥，挺好用的