这是一个创建于 4448 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近有个小想法，就是让用户使用书签栏中的“插件”（类似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
不知各位有何建议？
原型大概是这样（直接用爱库的改了一下）
我之前的思路是：
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
不知各位有何建议？
 |
1
paloalto OP 自坐沙发：
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. 不知道这三个哪个更适合？ 我先去研究一下。 |
 |
2
qiuai 2012-09-14 08:34:45 +08:00
=.=屌丝路过...这种需求我都是QQ截图了.....需要超屏截图的时候,PrtScn键...然后firework拼接.
|
 |
3
shw1395 2012-09-14 08:39:46 +08:00
蓝色理想很早就有了，可以学习借鉴下。
|
 |
5
NemoAlex 2012-09-14 14:21:02 +08:00
|
 |
7
greatghoul 2012-09-14 15:38:31 +08:00
显然后台去处理截图是不可行的，如果用户访问的页面是需要登陆的，你在后台显然是看不到的，还有浏览器差异等等。
单纯使用 js 而不依赖于浏览器提供的 API，实现截图难度很大。 |
|
8
paloalto OP @greatghoul 谢谢。
你的意思是最好做成浏览器插件吗？ 我对浏览器的API不了解，刚才看了一下Firefox的Awesome Screenshot https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/ 这个插件的代码，这一段似乎是负责截图、保存的，但是感觉有点复杂，夹杂了JS之外的东西，看不太懂。 http://gist.github.com/3721330 |
 |
9
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 |
|
10
greatghoul 2012-09-24 15:09:52 +08:00
@paloalto 是的，Chrome官方也有截图的扩展。
|
Select Language