PhantomJS 中的滚动页面答案

【问题标题】：Scrolling page in PhantomJSPhantomJS 中的滚动页面
【发布时间】：2018-09-28 16:17:49
【问题描述】：

我使用 PhantomJS 和 ffmpeg 从帧中渲染视频。我尝试做滚动框架并渲染它，但没有成功。我的代码是：

  const page = require("webpage").create();

  const getImage = (link, duration) => {
  page.viewportSize = { width: windowWidth, height: windowHeight };
  page.scrollPosition = {top: 0, left: 0};
  let videoDuration = Math.floor(duration * 25);

  if (link.startsWith("http://") || link.startsWith("https://")) {
    page.open(link, () => {
      let frame = 0;
      setInterval(() => {
        page.render("frames/image" + frame++ + ".png", { format: "png" 
  });
        page.evaluate(function () { window.scrollBy = 100; });
        if (frame > videoDuration) {
          phantom.exit();
        }
      }, 25);
    });
  } else {
    console.log("Enter a valid link");
    phantom.exit();
  }
};

getImage(imageLink, duration);

当我运行渲染的视频时，它只作为任何视频播放并且没有任何滚动。我做错了什么？ PS：我发现 page.scoolPosition 的解决方案很少 - 但它们也不起作用。

【问题讨论】：

标签： javascript node.js ffmpeg phantomjs

【解决方案1】：

用不同的超时时间打开页面后尝试等待。

const page = require("webpage").create();

const getImage = (link, duration) => {
    page.viewportSize = { width: windowWidth, height: windowHeight };
    page.scrollPosition = { top: 0, left: 0 };
    let videoDuration = Math.floor(duration * 25);

    if (link.startsWith("http://") || link.startsWith("https://")) {
        page.open(link, () => {
            let frame = 0;

            setTimeout(() => {
                setInterval(() => {
                    page.render("frames/image" + frame++ + ".png", {
                        format: "png"
                    });
                    page.evaluate(function () { window.scrollBy(0, 100); });
                    if (frame > videoDuration) {
                        phantom.exit();
                    }
                }, 25);
            }, 1000);
        });
    } else {
        console.log("Enter a valid link");
        phantom.exit();
    }
};

getImage(imageLink, duration);

也可以尝试使用其他滚动方式：window.scrollTo(...)、document.body.scrollTop = ...

更新：

window.scrollBy(X, Y); 是函数，不是属性。

【讨论】：

@ValeriiVoronkov 请提供网址。
@ValeriiVoronkov window.scrollBy(X, Y); 是函数，不是属性
let imageLink = "jet.gml.aisnovations.com" 当然是函数window.scrollBy(0,50);
@ValeriiVoronkov 网站有预加载器（此时滚动已禁用），增加超时时间
@ValeriiVoronkov 此站点在使用 Phantom 打开时出现错误 ERROR TypeError: undefined is not an object (evaluating 'XO(t=this._element,"").trim'); http://jet.gml.aisnovations.com/main.8ae72214bb4cd4701622.js:1 in veXO(t=this._element,"").trim。我不知道这是什么错误

【解决方案2】：

据我分析，对于这个网站“jet.gml.aisnovations.com/”，我无法创建视频渲染，但是...... 但我已经成功了https://ru.wikipedia.org

代码如下：

  const imageLink = "https://ru.wikipedia.org";
  const duration = 10; 

  const page = require("webpage").create();

  const saveImages = (link, duration) => {
  const width = 1024;
  const height = 768;
  page.viewportSize = { width, height };

  let videoDuration = Math.floor(duration * 25);

  if (
    link.startsWith("http://") ||
    link.startsWith("https://")
  ) {
    page.open(link, () => {
      const scrollHeight = page.evaluate(() => {
        return document.body.scrollHeight;
      });

      const scrollStep = (scrollHeight - height) / videoDuration;

      for (let i = 0; i < videoDuration; i += 1) {

        page.clipRect = {
          width,
          height,
          left: 0,
          top: scrollStep * i
        };

        page.render("frames/image" + (i + 1) + ".png", { format: "png" });
      }

      phantom.exit();
    });
  } else {
    console.log("Enter a valid link");
    phantom.exit();
  }
};

saveImages(imageLink, duration);

脚本将图像保存在文件夹帧中，然后使用命令从它们渲染视频剪辑

`ffmpeg -start_number 10 -i frames/image%02d.png -c:v libx264 -r 25 -pix_fmt yuv420p out.mp4`

【讨论】：