问题标签 [webpage-screenshot]

captureVisibleTab [docs]在我的 Google Chrome 扩展程序中似乎对我不起作用，我一直试图让它在基于浏览器操作的扩展程序中运行，但undefined每次都返回图像。然后我下载了谷歌创建的示例，这似乎也不起作用，返回undefinedor white.png（一个空白的白色图像）作为 image src。

我已经尝试在两个项目"tabs", "<all_urls>"的文件中设置权限。manifest.json我有谷歌浏览器 37。

我一直在尝试寻找答案，但我没有看到任何可靠的信息，是否存在错误，是否有解决方法？如果没有修复，还有其他选择吗？

谢谢，克里斯蒂安。

编辑：我可能应该让这部分更清楚。我下载了 Google 示例，安装了它，在 code.google.com 上运行了扩展程序，然后返回了一个空白图像，请参见屏幕截图。

我想从不同域/服务器上的另一个页面制作屏幕截图并将其显示在当前页面上。

我想用 iframe 来做，但在视口上出现问题（不适合整个页面，比如 350px 宽度）。所以我不能使用canvas HTML5，因为我找到的解决方案只对当前页面进行截图。

我想我需要在 PHP 中有一些东西。我找到了一些第三方服务，但我不喜欢也不想使用它。

该服务器只是一个共享托管服务器，它不是 VPS，因此我无法在其上安装 WebKit 或 PhantomJS。有人知道该怎么做吗？

我一直在处理要转换为图像的 HTML 页面。

我一直在使用 html2canvas 和 canvas2image 脚本，并在此处获取了此代码http://jsfiddle.net/8ypxW/3/，这使我可以创建一个按钮，该按钮将截取屏幕截图并将我的 HTML 页面下载为图像。

我遇到的问题是我下载的截图图像显示了我的文本而不是我的图像，即使它们来自同一个来源。我不确定这是否是我的 HTML、HTML2canvas 或 canvas2image 的问题。

我的示例尚未生效，但我的代码如下：

如果有人可以帮助我或指出我正确的方向，那将不胜感激。

提前致谢

我想用 PhoneGap 创建 InAppBrowser 的屏幕截图。我已经搜索了很多，但我什么也没找到。这甚至可能吗？

我的目标是：iOS 和 Android

我使用 PHP 脚本将 POST DATA 变量发送到 URL，然后 URL 响应 HTML 字符串。如何捕获上面显示在浏览器上的 HTML 字符串的屏幕截图。如果我不需要发送 2 个 POST 请求，一个用于 HTML 内容，一个用于屏幕截图，这是最好的解决方案。

更新：添加更多信息。我的网站从其他网站抓取 html 内容（通过向其发送 POST 数据然后获取其响应）。它只是一个 HTML 字符串。此外，我想获得这个响应的屏幕截图，它显示在浏览器上，最终用户可以看到。所有操作都在服务器端完成。

我正在尝试使用以下代码在我的网络应用程序中捕获部分网页的屏幕截图。

上面的代码在所有浏览器上都可以正常工作，我可以很好地得到 png。但是，如果我在没有 setTimeout 的情况下调用 captureScreenshot 方法，它就不能正常工作？即在画布上没有绘制任何内容。

我尝试过单步执行 html2Canvas 的源代码，但我似乎仍然无法弄清楚为什么我需要超时？我的解决方案有效，但我只需要确切知道导致超时的原因是什么？

好的，所以只是一些额外的信息，在 Chrome 和 IE 上它大部分时间都可以在没有超时的情况下工作，但在 Firefox 上，它在没有超时的情况下永远不会工作。

我正在努力寻找解决方案，尝试了很多选择。

我的理想目标是能够截图

• 抓取特定的 CSS 元素
• 抓取元素的全高（即使长于页面高度）
• 等待包含的任何资产已完全加载
• 快速地

第一次尝试（使用安装了 chromedriver 的 selenium-webdriver）

宝石文件

应用程序.rb

这在一定程度上有效，但屏幕截图被修剪到最大高度（这看起来像是 Chromedriver https://code.google.com/p/chromedriver/issues/detail?id=294的一个非常老的问题）

第二次尝试（使用 poltergeist 改为切换到 phantomjs）

宝石文件

应用程序.rb

这有不同的问题，

• 它捕获页面的全长
• 未嵌入 webfonts ( https://github.com/ariya/phantomjs/issues/12132 )
• 视网膜不可用（https://github.com/ariya/phantomjs/issues/10964）

第三次尝试（使用 Capybara 尝试利用 page.save_screenshot(path, :full => true)）

宝石文件

应用程序.rb

短版 - 这无济于事

第四次尝试（使用 Watir）

宝石文件

应用程序.rb

这可行（启动 Firefox），但在 DevicePixelRatio 上存在相同的问题，因为它无法获取视网膜屏幕截图。

第五次尝试（回到使用 Chrome）

应用程序.rb

直接回到裁剪页面的问题。

理想情况下，我认为可能有一种方法可以使用最新 ChromeDriver v2.12 的移动仿真选项来实现这一点

指定单个设备属性

还可以通过指定单个属性来启用移动仿真。要以这种方式启用移动仿真，“mobileEmulation”字典可以包含“deviceMetrics”字典和“userAgent”字符串。必须在“deviceMetrics”字典中指定以下设备指标： “width” - 设备屏幕的宽度（以像素为单位） “height” - 设备屏幕的高度（以像素为单位） “pixelRatio” - 设备的像素比

https://sites.google.com/a/chromium.org/chromedriver/mobile-emulation

但还没有设法让它工作。

任何建议将不胜感激谢谢！

首先是问题的摘要，然后再详细介绍： 是否可以向运行 phantomjs/casperjs 的外部专用服务器发送（cors）请求，作为回报，该服务器对请求的 url 进行屏幕截图并将屏幕截图发回？

情况详情： 八十年代我还很小的时候经常写代码。2 个月前才开始学习 PHP 和 jquery，我的第一个实践项目产生了一个图标生成器@www.iconoplastix.com。虽然结果看起来不错，但我仍然对任何事情一无所知。

它仅具有导出到 html/css 的功能，因为在服务器端制作屏幕截图（将图标呈现为图像）似乎相当困难/不可能。

现在 version1.0 已经上线，我可以专注于将图标导出到图像工作，但我不知道我想要建立的是否可能。

到目前为止我做了什么：

• 订阅了云 vps 专用服务器
• 在此服务器上安装了 phantomjs
• 一直在摆弄我自己系统上的 xampp 和 icongenerator 所在位置（外部，共享主机）之间的 cors 请求并成功。

我的目标是，一旦用户想要将他的图标导出到第一个网站（图标生成器所在的位置）上的图像，它就会创建一个文件夹，其中只有一个显示一系列图标的 html 文件。然后这个网站应该在运行 phantomjs 的情况下向我的 vps 云发送一个信号（corsrequest？）。消息/请求应包含必须截取屏幕截图的 url（md5 制作的文件夹）。在这个（cors）请求上，phantomjs（和 casperjs）应该截取这个 url 并将其发送回请求来自的网站。这是否可能，如果是这样，是否有人可以在我的黑暗中照亮，因为我不知道从这里去哪里。

我已经阅读了很多关于 phantonjs 和一些 casperjs 的文档，但是如果可以从网页中调用 phantomjs/casperjs，我找不到任何地方（如果我错了，请纠正我） 。如果这是不可能的，我的问题将如何解决？

构建一个 Safari（桌面）扩展，可以从 tab.visibleContentsAsDataURL() 访问屏幕截图；它运行出色，闪电般快速。像这样：Safari 扩展截图

在 iOS 上，我们尝试过：

• Html2Canvas（它没有产生足够好的结果）；http://html2canvas.hertzen.com

• 扩展中隐藏的 UIWebview（导致扩展中的内存问题）

在 iOS 上，共享扩展中的等价物是什么？换句话说：您将如何在 iOS Safari 扩展程序中截取屏幕截图？

我有一个页面，我正在获取动态生成的 html 部分。

这个“Advertise_preview”是一个 html 页面，我在其中单独获取该 html 部分。

$viewData['html'] 是巨大的 html 部分。几乎就像存储在变量中的另一个页面。

现在我想要做的是，我想将客户端的那个 html 部分转换为图像，而不是将其存储到数据库中，我想在一个框中显示生成的图像。

在那个盒子上，我正在应用 jquery.zoom.js来缩放悬停时的图像。

我已经使用过 html2canvas。这还不够我的要求。

html2canvas的问题如下：

1. 我必须隐藏我想要截图的 html 部分。其中html2canvas不接受隐藏部分将其转换为画布
2. 第二个问题是它生成的图像具有黑色背景或透明。

如果以上两个问题都解决了，那么我的工作就完成了。否则，请给我一些其他的 JS 或任何其他转换的想法。

我从 html 转换为画布的代码如下：

你们一直对我很有帮助。所以非常感谢。