码迷,mamicode.com
首页 > Web开发 > 详细

网页html截屏转图片(二)PhantomJS

时间:2019-05-01 18:39:15      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:cti   spl   nbsp   api   png   出现   问题:   uri   The   

关于PhantomJS

PhantomJS 是一个基于WebKit的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试等。

我们还可以用它来做爬虫哦,大家知道,网页上有些数据是通过执行js渲染出来的,这样的话爬虫去抓取数据的时候就会很麻烦,PhantomJS自带WebKit内核,我们可以利用PhantomJS解决爬虫不能执行js的问题。

这次要说的是他的截图功能

下面是官网提供的rasterize.js截图示例:

var page = require(‘webpage‘).create(),
    system = require(‘system‘),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log(‘Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]‘);
    console.log(‘  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"‘);
    console.log(‘  image (png/jpg output) examples: "1920px" entire page, window width 1920px‘);
    console.log(‘                                   "800px*600px" window, clipped to 800x600‘);
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split(‘*‘);
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: ‘0px‘ }
                                           : { format: system.args[3], orientation: ‘portrait‘, margin: ‘1cm‘ };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split(‘*‘);
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            // 通过clipRect可以指定渲染的区域:
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it‘s as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        if (status !== ‘success‘) {
            console.log(‘Unable to load the address!‘);
            phantom.exit(1);
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

上面的代码可以进行截图,不过问题就在于,页面的高度需要我们手动指定,那就不方便了。

在园子里发现有个哥们通过手动设定高度的方法来解决这个问题:http://www.cnblogs.com/xiehuiqi220/p/3551699.html,不过页面的高度没有那么高,渲染的图片下面就会出现大块的留白,也是不够灵活。

想到PhantomJS本身也可以执行js的,我们可以将页面加载完毕后,获取页面的实际高度,然后重新设定截取的区域,不就可以解决了。

于是便有了以下代码:

// 通过在页面上执行脚本获取页面的渲染高度
var bb = page.evaluate(function () { 
  return document.getElementsByTagName(‘html‘)[0].getBoundingClientRect(); 
});
// 按照实际页面的高度,设定渲染的宽高
page.clipRect = {
  top:    bb.top,
  left:   bb.left,
  width:  bb.width,
  height: bb.height
};
// 预留一定的渲染时间
window.setTimeout(function () {
  page.render(file);
  page.close();
  console.log(‘render ok‘);
}, 1000);

改造后的代码如下:

var page = require(‘webpage‘).create(),
    system = require(‘system‘),
    address, output, size;

if (system.args.length < 3 || system.args.length > 5) {
    console.log(‘Usage: rasterize.js URL filename‘);
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 1024, height: 600 };
    page.open(address, function (status) {
      // 通过在页面上执行脚本获取页面的渲染高度
      var bb = page.evaluate(function () { 
        return document.getElementsByTagName(‘html‘)[0].getBoundingClientRect(); 
      });
      // 按照实际页面的高度,设定渲染的宽高
      page.clipRect = {
        top:    bb.top,
        left:   bb.left,
        width:  bb.width,
        height: bb.height
      };
      // 预留一定的渲染时间
      window.setTimeout(function () {
        page.render(output);
        page.close();
        console.log(‘render ok‘);
      }, 1000);
    });
}

通过执行D:\Software\phantomjs-1.9.7-windows>phantomjs.exe render.js http://cnblogs.com cnblogs.png就可以把博客园首页截取下来了。

效果如下:

技术图片

网页html截屏转图片(二)PhantomJS

标签:cti   spl   nbsp   api   png   出现   问题:   uri   The   

原文地址:https://www.cnblogs.com/lixiaoran/p/10800207.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!