有一个关于网站截图的想法，求助技术实现思路。

最近有个小想法，就是让用户使用书签栏中的“插件”（类似pinterest那种bookmarklet）在网页中截图并评论。有点像原先google+的反馈功能。

原型大概是这样（直接用爱库的改了一下）

我之前的思路是：

0.先要做个网站，用来保存用户的评论和截图，并提供插件的安装方式。
1.用户安装“插件”：用户把我提供的插件（一段js脚本）拖到浏览器的书签栏。
2.点击书签插件，判断用户是不是已经登录，若已登陆，插件会在浏览器当前页面里加一个覆盖全部页面的透明层，提示用户可以选取页面中的一部分进行截取；未登录则提示先去网站登录。
3.用户在这个层上用鼠标选取一块区域，选完之后脚本会把当前网页的url、整个页面当前相对于屏幕的坐标（或者是滚动条的位置）、鼠标选取位置的坐标和大小这些参数用ajax传给后端python，同时在页面中显示一个表单，用来让用户写评论。
4.后端接收到参数后，对当前网页进行截图。截图完成后再把图片地址传给前端。在后端处理的时候，用户可以在前端写评论，最后提交到后端。

本来觉得没问题，后来又想了一下觉得有一点忽略了。如果是在服务器端进行裁剪、截图的话，出来的效果跟用户操作截图时看到的页面会有区别，比如用户用mac系统截图，但是服务器那边是linux，所以服务器截的图肯定不是mac下的效果，尤其是字体，会差别很大。这个问题可以参考爱库里那些网站的截图。

但是做这个工具需要让用户看到的、截取的、最后生成的图片都一致才行，所以貌似只能在前端截图，不能把url发给后端，让后端来截图。

于是我又找到了 html2canvans ( http://html2canvas.hertzen.com/ )这个东东，貌似原先的google+反馈功能就是用的这个。它里面自带了一个Bookmarklet（差不多就是我想做的东西了），本来以为是完美的解决方案，结果发现还是无法使截图效果做到完美一致。比如flash在截图中无法显示，还有元素的边距、文字等偶尔会有变化。如图：

其实我知道浏览器插件能完美实现截图功能，但总觉得插件太笨重，不如书签脚本来得轻巧。

附：ruby-china上一个朋友的想法和我类似，但是也没有最终的解决方案 http://ruby-china.org/topics/738

不知各位有何建议？

paloalto

2012-09-14 04:13:06 +08:00

自坐沙发：

http://www.paulhammond.org/webkit2png/

是不是一个比较完美的解决办法呢？看它是用的webkit，截出来的图应该比较好看。是使用在Mac上的（我服务器是linux），不过作者也给出了其他系统的解决办法：

If you use linux you may be more interested in khtml2png, Matt Biddulph's Mozilla screenshot script or Roland Tapken's QT Webkit script.

不知道这三个哪个更适合？

我先去研究一下。

supersheep

2012-09-14 23:14:24 +08:00

看到前半段就想说html2canvas，这里搜到有同学做了个类似的http://www.briangrinstead.com/blog/javascript-drawwindow。
说白了就是分析html和css然后以浏览器同样的方式渲染出来。
感觉最麻烦的还是设计时间轴的动画什么的，因为html结构是静态的。
flash要做的话似乎就又要能理解swf之类，总觉的做起来会很伤。
要从根本上解决此类需求大概纯flash站才是王道吧。
插件截图可以参见captureVisibleTab这个api。
http://open.chrome.360.cn/extension_dev/tabs.html