当前位置: 首页 > 面试题库 >

使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图

丁承德
2023-03-14
问题内容

使用Google的“报告错误”或“反馈工具”,您可以选择浏览器窗口的区域来创建屏幕截图,并在屏幕上提交有关错误的反馈。

他们是如何做到的?Google的JavaScript反馈API已从此处加载,它们对反馈模块的概述将演示屏幕截图功能。


问题答案:

JavaScript可以读取DOM并使用来相当准确地表示该DOM
canvas。我一直在研究将HTML转换为画布图像的脚本。今天决定将其实现为发送您所描述的反馈。

该脚本允许您创建反馈表单,其中包括在客户端浏览器上创建的屏幕截图以及表单。屏幕截图基于DOM,因此可能无法真实表示100%的准确度,因为它无法生成实际的屏幕截图,而是根据页面上的可用信息构建屏幕截图。

不需要服务器提供任何渲染
,因为整个图像都是在客户端的浏览器上创建的。HTML2Canvas脚本本身仍处于试验性状态,因为它无法解析我想要的几乎所有CSS3属性,即使有可用的代理,它也不支持加载CORS图像。

仍然与浏览器的兼容性非常有限(不是因为无法支持更多功能,只是没有时间使其更受跨浏览器支持)。



 类似资料:
  • 可以使用SeleniumWebDriver拍摄屏幕截图。 它会截取网页的整个区域,但浏览器窗口(boarder)不包括在此截图中。 有没有一种方法来采取与Selenium网络驱动程序截图,以便整个浏览器窗口被捕获? 我想看到所有的状态栏,选项卡和按钮。 这是可能的。NET,但它有可能会屏蔽其他内容(例如,浏览器被最小化),所以我想使用selenium。

  • 问题内容: 我正在构建一个称为“ HTML测验”的东西。它完全在JavaScript上运行,非常酷。 最后,弹出一个结果框,显示“您的结果:”,它显示了他们花费了多少时间,他们得到了多少百分比以及他们从10个问题中得出了多少个问题。我想有一个按钮,上面写着“捕获结果”,并使其以某种方式截取屏幕截图或div,然后仅在页面上显示捕获的图像即可在其中单击鼠标右键并“将图像另存为”。 我真的很想这样做,以

  • 我需要使用Sikuli的自动化,但我无法采取截图。问题是,当我点击“截屏”或“创建区域”时,IDE会被隐藏,但选择区域选项不会出现....

  • 我目前正在尝试实现Ashot来为我当前的项目截图,它正在为桌面工作。 但我想知道如何在iOS和Android设备上实现它,互联网上没有太多信息。 我使用了以下视口,它正在为iPad截图: 屏幕截图FullPage=new AShot()。拍摄策略(ShootingStrategies.viewportRetina(100,0,0,2))。截图(司机); 但是我想知道如何使用给定的属性来为其他IOS

  • 问题内容: 我想获得活动的“全页”屏幕截图。该视图包含一个RecyclerView,其中包含许多项。 我可以使用此功能拍摄当前视图的屏幕截图: 但是它仅包含我可以正常查看的项目(符合预期)。 截屏时,有什么方法可以使RecyclerView神奇地完整显示(一次显示所有项目)? 如果没有,我应该如何解决这个问题? 问题答案: 这是我的解决方案,当 所有项目的尺寸都相同 并且 只有一种类型的项目时 。