Javascript 如何使屏幕截图正确渲染

在左边的图像中，是casper脚本渲染的内容，右边是chrome渲染的内容。为了保护品牌形象，我模糊了复制品和图像

我按照这个例子开发了我的屏幕截图脚本

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

在我的代码中，我创建了一个视口参数数组和userAgent。然后循环遍历数组。当我打电话给casper.thenOpen时，我会等待1000毫秒，然后再截图。当我看到这个问题时，我添加了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引擎的grunt任务来执行这个任务。我想知道这是否与PhantomJS解释CSS的方式有关。由于PhantomJS正在使用Webkit，我希望它能够以与Google Chrome相同的方式呈现网页。

您是否尝试过使用PhantomJS的rasterize.js脚本捕获网页，以确定PhantomJS是否能够正确呈现网页？从命令行：phantomjs rasterize.jshttp://MY_DOMAIN/ test_render.pngwhere可以找到rasterize.js？这个？这个图像很有帮助。页面标记可能已损坏。PhantomJS 1.x与Chrome 13相当。因此，它可能以错误的方式评估某些标记。使用casper.getHTML与Chrome版本进行比较。此外，请注册到和活动。可能有错误。我可以从Chrome和CasperJS中获得DOM。将它们转换为人类可读的格式，然后进行区分。我看到的区别是，在当前版本的脚本中，casperJS不会加载通过RequireJS加载的所有javascript文件。我不能说渲染是否依赖于此，但我需要确保正确加载所有Javascript以进行交互式屏幕截图。