HTML5 Canvas示例屏幕截图

时间:2012-03-28 19:26:59

标签: javascript html5 dom canvas html5-canvas

由于我之前的一个问题,我遇到了html2canvas。我感到困惑的是如何实现它来执行以下操作:

  1. 创建实时网站的实时缩略图。
  2. 点击实时缩略图后会加载更大的网站图片。
  3. 将uri提供给脚本的最佳方式是什么?
  4. 所有图像都将在图像标记中设置特定的hxw,或者为特定类设置css。

1 个答案:

答案 0 :(得分:1)

如果您尝试创建缩略图的网站与用户所在的实际页面不同,您需要先将该页面的HTML下载到您的服务器(相同的来源),之后您可以将其包装它在iframe内,并创建一个截图。

生成的屏幕截图与实际网站的尺寸为1:1,因此要创建缩略图,您必须调整屏幕截图的大小。

该脚本不接受HTML,url或除DOM元素之外的任何其他内容作为呈现页面的输入。因此,使用该脚本生成屏幕截图的唯一方法是将其加载到您希望生成屏幕截图的页面上,或者在iframe中加载页面(在相同的来源下,因此您需要下载如果你使用跨源,通过代理来源。