HTML5 Canvas Example截图

Question

感谢上一个问题，我遇到过html2canvas。我感到困惑的是我如何实现它以执行以下操作：

1. 创建实时网站的活动缩略图。
2. 单击实时缩略图时，会加载网站的更大图像。
3. 什么是最好的方式喂尿的脚本？

所有图像都会在图像标签或特定类的css中设置特定的hxw。

Answer 1

如果您尝试创建缩略图的网站与用户所在的实际页面不同，则需要先将网页的HTML下载到您的服务器（相同来源），然后您可以将其包裹在iframe中并创建该屏幕截图。

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

脚本不接受HTML，url或除DOM元素外的其他任何内容作为渲染页面的输入。因此，您可以使用脚本生成屏幕截图的唯一方法是将其加载到要生成屏幕截图的页面上，或者在iframe中加载页面（在相同的来源下，因此您需要下载如果您使用交叉来源，则通过代理来源）。