如何正确渲染屏幕截图

时间:2014-09-25 16:10:51

标签: javascript gruntjs phantomjs screenshot casperjs

左边的图像是右边渲染的casper脚本是渲染的chrome。我模糊了副本和图像,以保护品牌标识。 enter image description here

我按照这个例子来开发我的屏幕捕获脚本 http://code.tutsplus.com/tutorials/responsive-screenshots-with-casper--net-33142

我最终得到了一个不正确的主页呈现。看起来好像页面的一个部分的宽度是硬编码的。

在我的代码中,我创建了一个视口参数数组和userAgent。然后遍历数组。当我调用casper.thenOpen时,我会等待1000ms然后再截取屏幕截图。当我看到问题时,我添加了1000毫秒的等待,但没有任何区别。

var viewportSizes = [
    [1280,800,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36'],
    [1440,900,'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.122 Safari/537.36']
],
    url = 'http://MY_DOMAIN/',
    saveDir = 'tests/casperjs/screenshots/' + url.replace(/[^a-zA-Z0-9]/gi, '-').replace(/^https?-+/, '');


casper.start();


casper.each(viewportSizes, function(self, viewportSize, i) {

    // set two vars for the viewport height and width as we loop through each item in the viewport array
    var width = viewportSize[0],
        height = viewportSize[1],
        userAgent = viewportSize[2];


    //give some time for the page to load
    casper.wait(5000, function() {

        //set the viewport to the desired height and width
        this.viewport(width, height);
        this.userAgent(userAgent);
        casper.thenOpen(url, function() {
            this.echo('Opening at ' + width);

            //Set up two vars, one for the fullpage save, one for the actual viewport save
            var FPfilename = saveDir + '/fullpage-' + width + ".png";
            var ACfilename = saveDir + '/' + width + '-' + height + ".png";

            //Capture selector captures the whole body
            this.captureSelector(FPfilename, 'body');

            //capture snaps a defined selection of the page
            this.capture(ACfilename,{top: 0,left: 0,width: width, height: height});
            this.echo('snapshot taken');
        });
    });
});

casper.run(function() {
    this.echo('Finished captures for ' + url).exit();
});

我正在通过使用PhantomJS引擎的繁重任务执行此操作。我想知道它是否与PhantomJS解释CSS的方式有关。由于PhantomJS正在使用Webkit,我希望它能够像谷歌Chrome一样呈现页面。

0 个答案:

没有答案