javascript - js如何将网页内容保存为图片

Question

比如这个应用 http://m.bb2b2bb.com/

实现的原理是什么。。。

Answer 1

通过抓包，你可以发现他是怎么实现的。

帮你分析分析他的实现方法

他的实现方案：

• user1_head 表示 im 用户1 头像 user1_head 同理

• user1, user2 表示用户名

• text_arr:123456789,987654321,hello,world,foo,bar
user_arr:user1,user2,user1,user2,user1,user2

  用逐一匹对的方式，记录两个人的对话。
  最后通过一个post请求，发送到服务器端，生成图片。
  

至于服务器是如何生成图片的方法很多。
这个网站后端使用的是 php 的 codeigniter 框架做的。可能使用的是gd2绘图类库。

推荐你使用的方法

不知道你后端使用的是什么编程语言。因为这种功能放在前后端都能做。

前端实现

缺点是：兼容性查，需要高级浏览器支持，因为需要支持 canvas 绘图，还有就是会操作 html5 canvas api。(如果不会使用canvas的话，要么去学，要么这条方案当我没说)
优点是：用户体验性很赞，很流畅。

大体实现方法：使用canvas。最终可将绘制的图像生成成图片。用户可以另存为保存，也可以将生成的二进制图片，上传服务器，生成连接。

后端实现

缺点是：体验性会差很多，因为需要和服务器交互，体验流畅度会差一点。
优点：客户端兼容性好，基本支持所有浏览器。

大体方法：前端负责组织数据。后端负责根据数据生成图片。后端解决的话就比较简单了，有了数据买就是把位置对好，生成图片，就行了。 nodejs, python, java, php 都用很多绘图库。

具体实现流程这里就不废话了。点到为止。

如果以上方法，题主都不太清楚该怎么操作，那该去补习一下了。

Answer 2

推荐用html2canvas, 不需要服务器端处理

Answer 3

点击生成图片后给服务器发了一个post请求，所以，图片是后端生成的。

Answer 4

一个精简的渲染引擎 (browser-side), 可以处理常见的样式, minify 后 60 KB. http://html2canvas.hertzen.com/

Answer 5

很显然，你需要 phantomjs

这里有一个简单的例子，利用phantomjs保存网页截图