如何使用Javascript / Jquery / HTML5函数将HTML页面捕获为图像

时间:2012-09-04 10:20:14

标签: javascript jquery html5

我想在我的网站上有一个按钮,可以捕获我网页的当前图像。我看过谷歌的“发送反馈”功能,想在我的网页上实现。我还阅读了html2canvas,并在实现时发现了以下问题。

  1. Html2canvas不会保存页面的任何swf对象。
  2. html2canvas的实现不足以理解如何使用tat。
  3. 在html2canvas上进行自定义并不容易(可能对我来说不容易)。
  4. 我希望在本地驱动器或我的网络服务器中突出显示/停电后保存捕获图像
  5. 我不打扰安全问题或其他事情,因为我想将这个功能用于原型,事实上如果它在本地的工作也很好。

    我可以使用本地主机在浏览器中运行此页面,并可以捕获图像并保存在本地。

    除了html2canvas之外,我也对其他解决方案持开放态度。我只是想把一个网页作为一个图像捕获,如果我能突出显示并且黑掉,那么它将会锦上添花:)。

    谢谢:)

2 个答案:

答案 0 :(得分:3)

尝试http://html2canvas.hertzen.com/我认为这对你有用。

答案 1 :(得分:1)

我刚用http://www.bitpixels.com/register进行了测试 注册是通过谷歌帐户完成的,该服务每月免费提供数千个缩略图。

只需使用curl:

curl --get "http://img.bitpixels.com/getthumbnail?code=SOME-CODE-YOU-GET-BY-REGISTRATION&url=http://www.example.com"

您最喜欢的编程语言应该支持。

考虑这个php示例:

<?php
$ch = curl_init('http://img.bitpixels.com/getthumbnail?code=SOME-CODE-YOU-GET-BY-REGISTRATION&url=http://www.example.com');
curl_setopt_array($ch, array(
    CURLOPT_BINARYTRANSFER  => true,
    CURLOPT_RETURNTRANSFER  => true
));
$imageBinary = curl_exec($ch);
file_put_contents('test.png', $imageBinary);

请参阅有关php-curl的更多信息: http://php.net/manual/de/book.curl.php

并使用php进行图像处理: http://php.net/manual/en/ref.image.php