Ruby 看到 36kr 网站的几个点,比较感兴趣,请教实现方法

xiaogui · 2013年08月05日 · 最后由 xiaogui 回复于 2014年03月18日 · 5959 次阅读

最近看了 36kr 的网站,发现有几点,比较感兴趣,却抓不住要领,不知道 36kr 当时是怎么来做的,特意来向大家请教。

1、用来发长微博的文章全文图片。 每篇文章下面,都有按钮 “分享长微博”,点击后弹出层,用来显示一张全文的图片。 疑问:这图片是否由程序生成?还是有编辑排版而成?若是程序生成,是如何生成的?借助什么 gem,还是其他方法? 如下图所示:

2、网页对应首版截图。 一部分文章下面会有文章对应主题网站的简介,里面会有一网站截图。 疑问:这图片是否由程序生成?还是有编辑手工截图而成?若是程序生成,是如何生成的?借助什么 gem,还是其他方法? 如下图所示:

希望大家有什么想法,可以畅所欲饮,困扰了我很久。@xinzhi 要是能给我回答下,就更好了,哈哈。

我猜:

第一个应该是 ImageMagick 生成的,第二个就是编辑截图自己上传的。

1、相对容易。ImageMagick 及相应 gem 可以实现。 2、稍复杂,尤其是要在 Linux Server 端实现。 一种方便的选择是在 server 上安装 firefox,然后控制 firefox 截图。 还有不借助 firefox 的方案,忘在哪看到的了,比较复杂,看完就忘了。

#1 楼 @daqing 第一个是什么调用 imageMagick 生成的呢?因为看到图文混排、字体、颜色的格式等。完全生写的话,工作量也挺不小的。 第二个,之前也经常见一些网站排名类的网站有这种首页图片,感觉那种不会是自己截图的吧?

#2 楼 @u1375410067 第一种对应的 gem 有哪些类? 第二种我之前想的是可以借助 chrome 浏览器和 chrome 截图插件,但是感觉是偏 cs 的那种方法,有点不太正,呵呵。

#4 楼 @xiaogui 第一种:https://github.com/hooopo/txt2img 不过这个实现不太好,我已经找到更简单的办法了...图文混排也不是很困难。

#4 楼 @xiaogui 第一种和第二种都可以用 html to pdf,再 pdf to img

还可以云服务:http://www.sciweavers.org/free-online-web-to-image

感谢 #1 楼 @daqing #2 楼 @u1375410067 #5 楼 @hooopo #7 楼 @doitian 我去查看下你们给出的相关资料

#6 楼 @hooopo 先转成 pdf,实在冰雪啊!

也在找类似的功能,感谢~

#11 楼 @xmonkeycn 我当时也觉得这是一个解决办法,哈哈哈

长微博是 wkhtmltoimage,图片会写入文件保存。

下方的信息卡片是由我们另外一个部门,36 氪 Plus 提供的。有自动截图,不过根据渲染效果感觉是 IE 一类的,具体我不太清楚。一部分是用户截图上传。

#14 楼 @xinzhi 对了 36kr 的微信二维码分享到朋友圈 应该也挂掉了吧

#15 楼 @jasl 因为微信各种调整各种封闭,这个目前不可用。我们是跟 jiathis.com 同一个接口的,他们也还没处理掉,我们就先等等吧。

#16 楼 @xinzhi 是哦,我上周六发现的,先把这功能下线了

匿名 #19 2013年08月07日

36kr 是 ror 开发的?

@xinzhi 36kr 不需要按下一页,就可以直接下拉,是怎么实现的?

#18 楼 @VMan 36 氪 2012 年度改版后是从 ruby-china 开源代码上构建的。

截图用 PhantomJS 或者 CasperJS 都能实现

匿名 #24 2013年08月07日

#21 楼 @xinzhi 就是本站的源代码么? github 上应该有吧?

#6 楼 @hooopo html 转 pdf 对插件要求很高吧,之前 java 有用过个,对 html 书写要求非常严格。。

#25 楼 @Tim_Lang 36kr 实现的这种 html 转 image,其实不是把页面整体的转为图片,而是把文章的内容转为图片,所以相对 html 不是特别的复杂。

@hooopo 图文混排要怎么实现?

@hooopo 装了那个 Gem 试了一下,中文输出是乱码。源文件是 UTF-8 的。暂时没找到解决办法,也不知道具体原因,只能猜测是 imagemagick 的编码不是 utf-8 的。

@xinzhi 为什么用 wkhtmltoimage 输出的图片上 中文都是歪的 你有遇到嘛?

#29 楼 @shawnyu 我试的是 js 的那种

需要 登陆 后方可回复, 如果你还没有账号请 注册新账号