首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >捕捉浏览器内容的截图(网站)

捕捉浏览器内容的截图(网站)
EN

Stack Overflow用户
提问于 2015-04-09 04:56:34
回答 7查看 8.4K关注 0票数 23

我的目标是有一个网站的形象(是的,就这样简单)。我知道有像html2canvas这样的工具。但是,我不希望客户端浏览器呈现屏幕快照。

原因之一是,我在webview中使用了一个chrome扩展,本质上类似于iFrame。出于安全原因,为包含iFrame的网站呈现屏幕快照不起作用。

我也知道他们正在开发本机支持捕捉网站截图的能力,但是我想要一个跨浏览器的解决方案,而不是依赖于浏览器的可能性。所有这些都发生在服务器上,因此应该通过命令行执行。

我现在要做的是:

  1. 通过命令行打开浏览器
  2. 通过命令行将焦点切换到浏览器窗口
  3. 通过命令行制作屏幕截图( mac上的屏幕,Linux上的scrot )

在这个基本的层次上做它有图像包含状态栏,浏览器插件等的缺点。事实上,我只想拥有实际的网站内容,而不是所有这些特定于应用程序的东西。

  • 最糟糕的解决方案是为每个浏览器的硬编码内容相对于窗口的0~0的位置。这太糟糕了(原因很明显)。
  • 我想出的另一个解决方案是:告诉浏览器(我可以通过套接字与插件对话)在x:0;y:0添加类似QR代码的内容,将屏幕截图发送到图像处理服务器。在此之后,删除QR代码并再次发送屏幕截图。那么,我知道每一点相对于0,x,0,但它也没有那么优雅。

最好的方法是一个命令行工具,它可以让我确定我想要捕获的应用程序的哪个部分。

一个例子是这个火狐插件这个服务器端工具或所有这些工具,提供不同浏览器和操作系统(如 )的网站截图。我想知道他们是如何摆脱浏览器特有的GUI元素的。

加法

我不知道我是否说得够清楚,但是我想要一个特定浏览器的内容的屏幕截图,但是没有浏览器特有的GUI元素。这意味着运行无头浏览器的应用程序对我没有任何用处。因为无头浏览器有自己的引擎。我特别希望有一个屏幕截图,例如火狐版本x。

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2015-04-18 05:07:10

你知道硒吗?它是一个实际打开特定浏览器并运行脚本测试的测试工具。它也可以用来截图。

这可能是你问题的解决方案。

票数 8
EN

Stack Overflow用户

发布于 2015-04-16 13:17:03

奥文森实际上会向下滚动页面,获取实际的屏幕截图,然后将这些图像合并到一个长图像中。您甚至可以将其设置为只捕获页面中显示的部分或选定的部分。

您可以将其与宏类型程序/脚本语言(如汽车热键 )混合使用。您可能会或不可能发现它比使用命令行更容易。我想这取决于你想做什么。

票数 4
EN

Stack Overflow用户

发布于 2015-04-13 06:33:04

大多数服务器端语言只是为HTML服务,而从不呈现它。不久前,我遇到了索引单页javascript应用程序的问题,其中一个解决方案是phantomJS

PhantomJS做你想做的事。您可以呈现HTML (服务端),幻影也内置了画布,所以您可以使用它来截图。幻影是webkit,所以它将覆盖大多数流行的浏览器(Chrome,Safari,Opera)。如果你想在火狐上看到网站的样子,你可以试试SlimerJS (类似于PhantomJs,但运行壁虎引擎)。

这将涵盖所有最流行的浏览器(IE除外)。这仍然是一个无头解决方案,但您可以看到不同的布局引擎。您将需要NodeJS,这可能有点学习,但它们都有屏幕截图的文档。祝好运!

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29539135

复制
相关文章
VUE 前端文本输出为超文本
VUE 的前端文本输出为超文本。但是我们希望的是页面能够自动将超文本进行转换。问题和解决{{blogContent.blogContent}}这种输出方式,VUE 模板是不会将内容以 HTML 的方式进行输出的。我们需要使用的代码为:<span v-html="blogContent.blogContent"></span>上面的代码会把内容以 HTML 的方式进行输出。这个是 VUE 模板和数据输出的问题。修改后界面中的内容将会按照下面的方式进行显示。通过上图,我们可以看到所有的 HTML 代码已经
HoneyMoose
2022/12/25
4820
VUE 前端文本输出为超文本
VUE 前端文本输出为超文本
VUE 的前端文本输出为超文本。但是我们希望的是页面能够自动将超文本进行转换。问题和解决{{blogContent.blogContent}}这种输出方式,VUE 模板是不会将内容以 HTML 的方式进行输出的。我们需要使用的代码为:<span v-html="blogContent.blogContent"></span>上面的代码会把内容以 HTML 的方式进行输出。这个是 VUE 模板和数据输出的问题。修改后界面中的内容将会按照下面的方式进行显示。通过上图,我们可以看到所有的 HTML 代码已经
HoneyMoose
2022/12/23
4770
VUE 前端文本输出为超文本
QT应用编程: QGraphicsView+QGraphicsTextItem动态编辑文本
QGraphicsView+QGraphicsTextItem 实现在画布上动态输入,编辑文本。 类似于截图软件、图片编辑器加文字水印的效果。 比如: 类似于windows系统自带的图片编辑器这个效果。
DS小龙哥
2022/01/07
3.3K1
QT应用编程: QGraphicsView+QGraphicsTextItem动态编辑文本
文本编辑sed
sed 全称是 Stream EDitor,是一种流编辑器,什么是流编辑器呢。也就是相当于一个格式化的工具。当数据流过这个工具时,都被格式化成固定的格式。比如一个流水线中的一个模具,原材料是各种形状的,但是结果模具处理之后都变成同一的形状。这就是流编辑器。sed 默认一次处理一行内容。处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用 sed 命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送往屏幕。接着处理下一行,这样不断重复,直到文件末尾。原文件内容并没有改变。sed 主要用来自动编辑一个或多个文件,简化对文件的反复操作。而不需要编写转换程序来完成。
生信喵实验柴
2022/10/25
5040
Linux文本编辑命令
tai命令的强悍的功能是一个可以持续刷新一个文件的内容,当想要实现实时查看最新日志文件,tail -f
心跳包
2020/08/31
2.7K0
以编程方式执行Spark SQL查询的两种实现方式
摘 要 在自定义的程序中编写Spark SQL查询程序 1.通过反射推断Schema package com.itunic.sql import org.apache.spark.sql.SQLContext import org.apache.spark.{SparkConf, SparkContext} /**   * Created by itunic.com on 2017/1/2.   * Spark SQL   * 通过反射推断Schema   * by me:   * 我本沉默是关注互联
天策
2018/06/22
2K0
文本编辑器
注意:gets_s函数和fgets函数都会从缓冲区带走\n回车符,遇到空格不会停止输入
大忽悠爱学习
2021/03/02
9980
文本编辑器
wangEditor富文本编辑
安装 npm install wangEditor -s 页面引入 import wangEditor from "wangeditor"; 完整代码 <template> <div class="box"> <div id="editor"></div> <div class="btn"> <el-button type="primary" @click="getEditorData" >生成的html代码</el-button >
明知山
2022/05/05
1.6K0
wangEditor富文本编辑
vue富文本编辑器的使用_elementui富文本
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/04
2.3K0
vue 富文本编辑框_基于vue的富文本编辑器
npm i wangeditor –save 插件官网地址:https://www.wangeditor.com/
全栈程序员站长
2022/11/08
1.2K0
以编程方式创建Vue.js组件实例
最近参与了一个Vue.js项目,项目中需要能够以编程方式创建组件。通过编程,意思是使用JavaScript创建和插入组件,而无需在模板中编写任何内容。
前端知否
2020/03/23
7.8K3
vuetify富文本编辑器_vue富文本编辑器的使用
最近再弄一个后台管理系统,挑选了不少的编辑器,最终选择了tinymce,UI精美,功能模块多,可按需加载配置 来一张tinymce官网的完整功能的图(没梯子可能访问速度有点慢…)
全栈程序员站长
2022/11/15
2.8K0
vuetify富文本编辑器_vue富文本编辑器的使用
文本编辑器
文本编辑器——记事本类型的应用,可以打开、编辑、保存文本文档。可以增加单词高亮和其它的一些特性。 效果图: //CGEditorDlg成员 public: CString m_filename;//
_gongluck
2018/03/08
2.1K0
文本编辑器
django 富文本编辑的种类
django 富文本编辑的种类 ckeditor(推荐) tinymce ueditor ... ckeditor 官网:https://ckeditor.com/ 安装:https://xieboke.net/article/7/ 文档:https://django-ckeditor.readthedocs.io/en/latest/ tinymce 官网:https://www.tiny.cloud/docs/api/tinymce/root_tinymce/ 安装:https://www.cnblog
卓越笔记
2023/02/18
3980
文本编辑工具vi的使用
基本上 vi/vim 共分为三种模式,分别是命令模式(Command mode),输入模式(Insert mode)和底线命令模式(Last line mode)。这三种模式的作用分别是:
姚远OracleACE
2023/04/06
9810
文本编辑工具vi的使用
wangeditor富文本编辑器_vue使用富文本编辑器
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/07
2.1K0
wangeditor富文本编辑器_vue使用富文本编辑器
文本编辑器VimNeovim被曝任意代码执行漏洞
6月4日,名为Arminius的安全研究员在twitter曝光现Vim/Neovim的本地代码执行漏洞,并且还被披露了PoC。作为Linux的上古神器级的文本编辑器使用量还是比较大的,建议用户立刻更新最新补丁。
FB客服
2019/06/18
6740
Sed 文本编辑器
如果你使用的是 Linux、BSD 或 macOS,那么你已经安装了 GNU 或 BSD 版的 sed。这是两个不同的原始 sed
派大星在吗
2021/12/05
1.1K0
常见文本编辑器
Download Notepad3 - Notepad replacement with syntax highlighting. https://www.rizonesoft.com/downloads/notepad3/
acc8226
2022/09/22
1.1K0
konva实现双击编辑富文本
完整代码放到了:https://gitee.com/VampireAchao/simple-konva-html
阿超
2022/08/21
1.7K0

相似问题

以编程方式编辑文本更改提示文本

24

以编程方式在编辑文本下面创建新的文本视图

32

Android以编程方式获得编辑文本

412

以编程方式聚焦编辑文本(Kotlin)

31

以编程方式编辑DataGridViewCell中的文本

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文