用gm实现基于node.js的selenium自动化截取长图的问题
- 解决思路
- 具体代码
- 效果
- 总结
解决思路
主要运用gm方法对截图的拼接:
-
先运动webdriver.takeScreenshot()和scroll的操作分别截取出我们需要的截图。
-
gm().把所有的截图拼接在一起(需要安装gm:GraphicsMagick链接)
-
删除没用的临时的截图
具体代码
const gm = require('gm');
exports.screenLongShot = async function (driver, path) {// 图片存入的路径let targetPath = path.split("/");let dirPath = path.substring(0, path.indexOf(targetPath[targetPath.length - 1]));// 全文的高度let totalHeight = await driver.executeScript("return document.body.scrollHeight");// 获取浏览器页面的高度,判断需要向下scroll几次let hh = await driver.manage().window().getRect();let height = hh['height']let count = height;let i = 1while (height<totalHeight){if (mkdirsSync(dirPath) === true) {// 截图await driver.takeScreenshot().then(function (image) {console.log(image)// 先暂时存起来fs.writeFile(dirPath + 'tmp' + i + '.jpeg', image, 'base64', function (err) {if (err !== null) {console.log(err);}});})}i++;// 向下scroll 一个窗口的高度await driver.executeScript("window.scrollBy(0,"+height+")");height += count;}// 读文件 获取刚才截的几张图let tmpImg = await fs.readdirSync(dirPath)let finImg = []for(let key of tmpImg){console.log(key)if (key.search('tmp') !== -1){finImg.push(key)}}// 先把第一个图片当作最上面的图,之后在这个图片上拼接,之后删除掉临时的图片await gm(dirPath+finImg[0]).write(path, function(err){fs.unlinkSync(dirPath+finImg[0]);if(err != null){console.log(err);}});await wait(driver, 2000);// 拼接之后删除for(let i = 1; i< finImg.length;i++){await wait(driver, 2000);await gm(path).append(dirPath+finImg[i]).write(path, function(err){fs.unlinkSync(dirPath+finImg[i]);if(err != null){console.log(err);}});}
};
效果
总结
方法有点垃圾,就是把多个图拼接在一起,但是由于没找到好的方法,所以能勉强实现截图的目的。如果有更好的方法,欢迎分享!