├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── bin └── snapline ├── circle.yml ├── demo.gif ├── example ├── convert-to-gif.js └── loading.json ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.png 3 | *.log 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example/loading.json 2 | test/example.json 3 | demo.gif 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Pierre-Marie Dartus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # snapline 2 | 3 | [![Circle CI](https://circleci.com/gh/pmdartus/snapline.svg?style=svg)](https://circleci.com/gh/pmdartus/snapline) 4 | 5 | > Unleash your screenshots stored in Chrome Devtool timeline files 6 | 7 | ![demo](demo.gif) 8 | 9 | ## Features 10 | 11 | * Convert timeline to gif 12 | * Extract screenshots save in a timeline into a folder 13 | 14 | ## Install 15 | 16 | Before using snapline, please install `imageMagick` and ensure that your version of node is greater than `4.0`. 17 | 18 | ```shell 19 | npm install -g snapline 20 | ``` 21 | 22 | ## CLI usage 23 | 24 | ```shell 25 | > snapline -h 26 | 27 | Usage: snapline [options] 28 | 29 | Options: 30 | --help Show help [boolean] 31 | -o, --output Output file name [string] [default: "timeline.gif"] 32 | -f, --fps Number of frames per seconds [number] [default: "10"] 33 | ``` 34 | 35 | ## Node usage 36 | 37 | ```js 38 | const snapline = require('../src') 39 | const timeline = require('./my-awesome-timeline.json') 40 | 41 | snapline.toGif(timeline) 42 | .then(gifPath => console.log(`The gif(t) is ready: ${gifPath}!`)) 43 | ``` 44 | 45 | ## API 46 | 47 | ### `snapline.toGif(timeline[, options])` 48 | 49 | * `timeline` - The parsed JSON content of the timeline file 50 | * `options.output` - path of the gif. default: `./timeline.gif` 51 | * `options.fps` - Number of frames per seconds. default: `10` 52 | 53 | Returns a `Promise` that resolves with the path of the created gif 54 | 55 | ### `snapline.toImages(timeline[, options])` 56 | 57 | * `timeline` - The parsed JSON content of the timeline file 58 | * `options.output` - folder path that will contains the screenshots. default: `./screenshots` 59 | * `options.fps` - Number of frames per seconds. default: `10` 60 | 61 | Returns a `Promise` that resolves with the path of the path of the created directory 62 | 63 | ## License 64 | 65 | MIT. See `/LICENSE` 66 | 67 | ## Owner 68 | 69 | Pierre-Marie Dartus - [@pmdartus](https://github.com/pmdartus) 70 | -------------------------------------------------------------------------------- /bin/snapline: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 'use strict' 3 | 4 | const fs = require('fs') 5 | const yargs = require('yargs') 6 | const snapline = require('..') 7 | 8 | function exitOnError (message) { 9 | console.error(message) 10 | process.exit(1) 11 | } 12 | 13 | const argv = yargs 14 | .usage('Usage: $0 [options]') 15 | .help() 16 | .demand(1) 17 | .option('o', { 18 | alias: 'output', 19 | default: 'timeline.gif', 20 | describe: 'Output file name', 21 | type: 'string' 22 | }) 23 | .option('f', { 24 | alias: 'fps', 25 | default: '10', 26 | describe: 'Number of frames per seconds', 27 | type: 'number' 28 | }) 29 | .argv 30 | 31 | const timelinePath = argv._[0] 32 | const timelineFile = fs.readFileSync(argv._[0]) 33 | 34 | let timelineEntries 35 | try { 36 | timelineEntries = JSON.parse(timelineFile) 37 | } catch (e) { 38 | exitOnError(`Impossible to parse: ${timelinePath}`) 39 | } 40 | 41 | snapline.toGif(timelineEntries, argv) 42 | .catch(err => exitOnError(err.message)) 43 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | machine: 2 | node: 3 | version: 4.0 4 | 5 | test: 6 | override: 7 | - nvm use 4.0 && npm test 8 | - nvm use 5.0 && npm test 9 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pmdartus/snapline/34376d75edb9b48d091d648c16b6bb2f325c3b02/demo.gif -------------------------------------------------------------------------------- /example/convert-to-gif.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const snapline = require('..') 4 | const timeline = require('./loading.json') 5 | 6 | snapline.toGif(timeline, { output: 'test.gif', fps: 10 }) 7 | .then(gifPath => console.log(`The gif(t) is ready: ${gifPath}!`)) 8 | .catch(console.error) 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path') 4 | const fs = require('fs-promise') 5 | const exec = require('child_process').exec 6 | 7 | /** 8 | * Return true if the passed entry is a screenshot 9 | * @param {timelineEntry} entry 10 | * @return {Boolean} 11 | */ 12 | function isScreenshotEntry (entry) { 13 | return entry.name === 'Screenshot' 14 | } 15 | 16 | /** 17 | * Add a padding in front of a number 18 | * @param {Number} number to convert 19 | * @param {Number} length expected string length 20 | * @return {String} 21 | */ 22 | function padLeft (number, length) { 23 | let ret = number + '' 24 | while (ret.length < length) { 25 | ret = '0' + ret 26 | } 27 | return ret 28 | } 29 | 30 | /** 31 | * Get the start and end time stamps of the timeline 32 | * @param {timelineEntry[]} timeline 33 | * @return {Object} containing the start and end timestamp 34 | */ 35 | function getTimeBoundaries (timeline) { 36 | const devToolTimestamps = timeline 37 | .filter(entry => entry.cat === 'devtools.timeline') 38 | .map(entry => entry.ts) 39 | .sort() 40 | 41 | return { 42 | start: devToolTimestamps[0], 43 | end: devToolTimestamps[devToolTimestamps.length - 1] 44 | } 45 | } 46 | 47 | /** 48 | * Saves a screenshot entry on the disk 49 | * @param {timelineEntry} entry 50 | * @param {String} filePath 51 | * @return {Promise} resolving the file image path 52 | */ 53 | function saveSreenshotEntry (entry, filePath) { 54 | const fileContent = entry.args.snapshot 55 | return fs.outputFile(filePath, fileContent, 'base64') 56 | } 57 | 58 | /** 59 | * Convert and save an array of screenshots to a gif 60 | * @param {String} folderPath 61 | * @param {String} gifPath 62 | * @param {Object} opts 63 | * @return {Promise} resolve with the path of the created gif 64 | */ 65 | function convertFolderToGif (folderPath, gifPath, opts) { 66 | const convertArgs = [ 67 | folderPath + '/*.png', 68 | `-set delay 1x${opts.fps}`, 69 | '-loop 0', 70 | gifPath 71 | ].join(' ') 72 | 73 | return new Promise(function (resolve, reject) { 74 | exec('convert ' + convertArgs, function (err) { 75 | if (err) { 76 | return reject(err) 77 | } 78 | resolve(gifPath) 79 | }) 80 | }) 81 | } 82 | 83 | /** 84 | * Get a list of entries at the right fps 85 | * @param {timelineEntry[]} entries 86 | * @param {Object} timeBoundaries object containing the start and end timestamps 87 | * @param {Object} opts 88 | * @return {timelineEntry[]} updated entry list 89 | */ 90 | function adjustScreenshotsEntries (entries, timeBoundaries, opts) { 91 | const accumulator = [] 92 | const tsStep = 1 / opts.fps * Math.pow(10, 6) 93 | 94 | let tsRunner = timeBoundaries.start 95 | let entryPointer = 0 96 | 97 | while (tsRunner <= timeBoundaries.end) { 98 | while (entryPointer < entries.length - 1 && 99 | tsRunner >= entries[entryPointer].ts) { 100 | entryPointer++ 101 | } 102 | 103 | accumulator.push(entries[entryPointer]) 104 | tsRunner += tsStep 105 | } 106 | 107 | return accumulator 108 | } 109 | 110 | /** 111 | * Save images from a timeline in a folder 112 | * @param {timelineEntry[]} entries timeline to convert 113 | * @param {Object} opts export options 114 | * @return {Promise} resolved with the folder path 115 | */ 116 | function toImages (entries, opts) { 117 | opts = Object.assign({ 118 | output: './screenshots', 119 | fps: 10 120 | }, opts) 121 | 122 | const screenshotsEntries = entries.filter(isScreenshotEntry) 123 | const timeBoundaries = getTimeBoundaries(entries) 124 | const adjustedSreenshotEntries = adjustScreenshotsEntries(screenshotsEntries, timeBoundaries, opts) 125 | 126 | const saveAll = adjustedSreenshotEntries.map(function (entry, index) { 127 | const fileName = `screenshot-${padLeft(index, 4)}.png` 128 | const filePath = path.resolve(opts.output, fileName) 129 | return saveSreenshotEntry(entry, filePath) 130 | }) 131 | 132 | return Promise.all(saveAll) 133 | } 134 | 135 | /** 136 | * Convert timeline to a gif 137 | * @param {timelineEntry[]} entries timeline to convert 138 | * @param {Object} opts export options 139 | * @return {Promise} resolved with the gif path 140 | */ 141 | function toGif (entries, opts) { 142 | opts = Object.assign({ 143 | output: 'timeline.gif', 144 | tmp: '/tmp/screenshots', 145 | fps: 10 146 | }, opts) 147 | 148 | const toImagesOpts = { 149 | fps: opts.fps, 150 | output: opts.tmp 151 | } 152 | 153 | return fs.emptyDir(opts.tmp) 154 | .then(() => toImages(entries, toImagesOpts)) 155 | .then(() => convertFolderToGif(opts.tmp, opts.output, opts)) 156 | } 157 | 158 | module.exports = { 159 | toImages, 160 | toGif 161 | } 162 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snapline", 3 | "version": "0.0.2", 4 | "description": "Unleash your screenshots stored in Chrome Devtool timeline files", 5 | "author": "Pierre-Marie Dartus ", 6 | "license": "MIT", 7 | "keywords": [ 8 | "chrome", 9 | "devtool", 10 | "timeline", 11 | "screenshot", 12 | "gif" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/pmdartus/snapline/" 17 | }, 18 | "main": "index.js", 19 | "bin": { 20 | "snapline": "bin/snapline" 21 | }, 22 | "scripts": { 23 | "test": "node example/convert-to-gif.js && npm link && snapline example/loading.json", 24 | "lint": "./node_modules/.bin/standard" 25 | }, 26 | "dependencies": { 27 | "fs-promise": "^0.5.0", 28 | "yargs": "^4.1.0" 29 | }, 30 | "devDependencies": { 31 | "babel-eslint": "^5.0.0", 32 | "standard": "^6.0.7" 33 | }, 34 | "engines": { 35 | "node": ">=4.0" 36 | }, 37 | "standard": { 38 | "parser": "babel-eslint" 39 | } 40 | } 41 | --------------------------------------------------------------------------------