代码之家  ›  专栏  ›  技术社区  ›  Valerii Voronkov

在PhantomJS中滚动页面

  •  0
  • Valerii Voronkov  · 技术社区  · 6 年前

    我使用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);
    

    当我运行渲染视频时,它只作为任何视频播放,没有任何滚动。 我做错了什么?

    2 回复  |  直到 6 年前
        1
  •  0
  •   Lemix    6 年前

    尝试在打开具有不同超时的页面后等待。

    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);

        2
  •  0
  •   Valerii Voronkov    6 年前

    我可以分析,对于这个网站“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`