新手问题 怎么样给一个外部的 url 做截图 (screenshot)?

cqcn1991 · 2013年06月02日 · 最后由 qizisheng 回复于 2015年03月07日 · 6026 次阅读

比如说,链接聚合网站。用户推荐了一个链接,咱们截个图(screenshot)生成一个页面预览

找到了 2 个方法 1.PhantomJs,但是这个没找到具体的例子,还真不好下手

2.另外就是用 IMGkit(https://github.com/csquared/IMGKit) 这个本人折腾得差不多了。但是出来的图是马赛克。。。WTF……

不知道有童鞋用过这两种方法没,能不能指点一下……给点例子看看 或者还有什么别的方法,也希望能不吝指教!

phantomjs. 挺好实现的,算是它的基本功能了...

var page = require('webpage').create();
page.open('http://ruby-china.org/topics/11426', function() {
  page.render('ruby-china.png');
  phantom.exit();
});

!![]((http://d.pr/i/tSPL+)

#1 楼 @Saito 他的文档我有看,但是确实是缺乏能够照抄的实例……有点力不从心,比如说,这个怎么和 carrierwave 那些联系起来啊?

phantomjs 很强大啊。

#1 楼 @Saito 我想了好几天也不知道到底怎么弄……Stackoverflow 上还被人给 -1 了:http://stackoverflow.com/questions/16941919/using-phantomjs-to-screenshot-a-page-in-rails

主要是这几个问题: 1.这个 js 的文件放到哪里?在 controller 里面使用?还是在哪里? 2.图片是不是需要储存下啦?(用 carrierwave 之类)

#1 楼 @Saito 你的中文字显示是怎么解决的吖?

@ChanceDoor 给系统装中文字体就可以了

#6 楼 @zfben 我怎么装了一大堆还是缺字

我用 PDFKit 时,在 debian 就装 ttf-arphic-ukai ttf-arphic-uming ttf-dejavu-core ttf-droid ttf-wqy-microhei ttf-wqy-zenhei

phantomjs 这么牛,还有这东西

#7 楼 @ChanceDoor 看网页用的什么字体,缺什么装什么,一般中文的话需要宋体和雅黑。

#8 楼 @imlcl 都装了 但还是不行

#4 楼 @cqcn1991 1.可以写成一个 shell 命令在 ruby 里面,参数通过命令行参数传递过去,参数用 system.args[1],system.args[2] 这样的形式获取,例如传入 url 和图片的路径,执行完以后再继续用 carrierwave 从本地读取 2.如果需要返回生成的文件流或者文件名,可以用 IO.popen

// Filename: screen_capture.js, edit from loadspeed.js
// 用法: phantomjs screen_capture.js <URL>
var page = require('webpage').create(),
    system = require('system'),
    fs = require("fs"),
    url;

if (system.args.length === 1) {
    console.log('Usage: screen_capture.js <some URL>');
    phantom.exit();
}

url = system.args[1];
page.open(url, function (status) {
    fs.write("/dev/stdout", page.renderBase64('png'), "w");
    phantom.exit();
});
# Filename: ruby_test.rb
# 运行: ruby ruby_test.rb
require "base64"

def get_png_screen_capture(url)
  cmd_line = "phantomjs screen_capture.js #{url}"
  result = nil
  IO.popen cmd_line, "w+b" do |pipe|
  #  pipe.write params #如果需要通过stdin传大量参数过去,
    pipe.close_write
    result = pipe.read
    pipe.close
  end
  result = Base64.decode64(result)
  return result
end

File.open('baidu.png',"wb") do |file|
  file.write(get_png_screen_capture("http://www.baidu.com/"))
end

把这两个文件保存在同一个目录下,运行 ruby ruby_test.rb,会生成 baidu.png 在 ruby 里面拿到文件流以后做什么就可以随意了,用 carrierwave 处理也很容易 js 可以放在 Rails.root/bin 目录下 (因为是执行文件),调用的时候用绝对路径

抱歉用百度做例子,找不到更好的能稳定访问并且很简洁的页面了,照规矩,上图

http://dtrex.iteye.com/blog/1441864 watir-webdriver 这东西可以,ruby 的一个 Gem

I "rails testweb",then "cd testweb",then "ruby script/server"..and something goes wrong,here's the following description: => Booting WEBrick => Rails 2.3.14 application starting on http://0.0.0.0:3000 /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/rails/gem_dependency.rb:21:in add_frozen_gem_path': undefined methodsource_index' for Gem:Module (NoMethodError) from /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/initializer.rb:298:in add_gem_load_paths' from /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/initializer.rb:132:inprocess' from /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/initializer.rb:113:in send' from /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/initializer.rb:113:inrun' from /home/liuzhou/testweb/config/environment.rb:9 from /usr/lib/ruby/site_ruby/1.8/rubygems/core_ext/kernel_require.rb:45:in gem_original_require' from /usr/lib/ruby/site_ruby/1.8/rubygems/core_ext/kernel_require.rb:45:inrequire' from /usr/lib64/ruby/gems/1.8/gems/activesupport-2.3.14/lib/active_support/dependencies.rb:182:in require' from /usr/lib64/ruby/gems/1.8/gems/activesupport-2.3.14/lib/active_support/dependencies.rb:547:innew_constants_in' from /usr/lib64/ruby/gems/1.8/gems/activesupport-2.3.14/lib/active_support/dependencies.rb:182:in require' from /usr/lib64/ruby/gems/1.8/gems/rails-2.3.14/lib/commands/server.rb:84 from /usr/lib/ruby/site_ruby/1.8/rubygems/core_ext/kernel_require.rb:45:ingem_original_require' from /usr/lib/ruby/site_ruby/1.8/rubygems/core_ext/kernel_require.rb:45:in `require' from script/server:3

thank you for you help...

之前自己试验过 phantomjs 等等 lib 但是还需要程序调用 scripts 比较底下效率 可以试试 www.link2img.com 的 API 服务 注册一个就可以免费使用了。传入你的 url 就回来需要的 png 或者 json 信息

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