在 PhantomJS 中滚动页面
Scrolling page in PhantomJS
我使用 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.scroolPosition 的解决方案 - 但它们也不起作用。
尝试打开页面后等待不同的超时时间。
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);
是函数,不是 属性.
据我分析,对于这个站点 "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`
我使用 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.scroolPosition 的解决方案 - 但它们也不起作用。
尝试打开页面后等待不同的超时时间。
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);
是函数,不是 属性.
据我分析,对于这个站点 "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`