javascript代码实例教程-利用PhantomJS进行网页截屏,完美解决截取高度的问题

发布时间:2019-01-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-利用PhantomJS进行网页截屏,完美解决截取高度的问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 PhantomJS 是一个基于webkit服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: @L_512_1@ 处理, 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);

        }

    });

}

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

 

在园子里发现有个哥们通过手动设定高度的方法来解决这个问题:https://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);

    });

}

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-利用PhantomJS进行网页截屏,完美解决截取高度的问题全部内容,希望文章能够帮你解决javascript代码实例教程-利用PhantomJS进行网页截屏,完美解决截取高度的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。