├── .gitignore ├── EXAMPLES.md ├── LICENSE.md ├── README.md ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | #Other 61 | .DS_Store 62 | 63 | #Screenshots 64 | generated-screenshots/ -------------------------------------------------------------------------------- /EXAMPLES.md: -------------------------------------------------------------------------------- 1 | #### Screenshots from https://whatbrowser.org/ 2 | | iPhone 6 | BlackBerry PlayBook | 3 | |:---:|:---:| 4 | | ![iPhone6](https://i.imgur.com/t4Ogu7X.png)| ![BlackBerryPlaybook](https://i.imgur.com/GZnHds8.png)| 5 | 6 | #### Example using 'fullscreen' modifier 7 | 8 | | iPhone 4 - Fullscreen | 9 | |:---:| 10 | | ![iPhone4](https://i.imgur.com/hTtJHJ1.jpg)| 11 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [2017] [Tom Ross] 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # generate-device-screenshots 2 | A simple command line tool to generate device screenshots of different webpages. 3 | 4 | ## Installation 5 | *generate-device-screenshots requires Node version 7.10 or greater* 6 | 7 | To use generate-device-screenshots in your project, run: 8 | ``` 9 | npm i generate-device-screenshots 10 | ``` 11 | 12 | Then add the following to your `package.json` file 13 | ``` 14 | "scripts":{ 15 | "generate-device-screenshots": "generate-device-screenshots" 16 | } 17 | ``` 18 | 19 | 20 | > **Note**: Installing generate-device-screenshots will install [Puppeteer](https://github.com/GoogleChrome/puppeteer), a headless version of Chromium (~71Mb Mac, ~90Mb Linux, ~110Mb Win) 21 | 22 | 23 | 24 | ## Usage 25 | #### Generate screenshot from a single device 26 | `npm run generate-device-screenshots https://example.com "iPhone 6"` 27 | 28 | #### Generate screenshots from multiple devices 29 | `npm run generate-device-screenshots https://example.com "iPhone 6, Nexus 10, iPhone 4"` 30 | 31 | #### Generate screenshots from [every device currently available in Google developer tools](https://github.com/GoogleChrome/puppeteer/blob/master/DeviceDescriptors.js) 32 | `npm run generate-device-screenshots https://example.com "all"` 33 | 34 | #### Generate fullscreen screenshot 35 | `npm run generate-device-screenshots https://example.com "iPhone 6" fullscreen` 36 | 37 | #### Generate screenshot without prompting the user for confirmation (used in a build process) 38 | `npm run generate-device-screenshots https://example.com "iPhone 6" force-yes` 39 | 40 | 41 | ## Parameter documentation 42 | `npm run generate-device-screenshots ` 43 | 44 | ``` 45 | 46 | - Required 47 | - Example: https://example.com 48 | ``` 49 | 50 | ``` 51 | 52 | - Required 53 | - Example 1: "iPhone 6" 54 | - Example 2: "iPhone 6, iPhone 5" 55 | - Example 3: "all" 56 | - Must be a valid and exact name from the list of available devices or "all" to use every device 57 | ``` 58 | 59 | ``` 60 | 61 | - Optional 62 | - Example: fullscreen 63 | ``` 64 | 65 | ``` 66 | 67 | - Optional 68 | - Example: force-yes 69 | ``` 70 | 71 | ## [Example Screenshots](EXAMPLES.md) 72 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const puppeteer = require('puppeteer'); 4 | const devices = require('puppeteer/DeviceDescriptors'); 5 | const Confirm = require('prompt-confirm'); 6 | const fs = require('fs'); 7 | 8 | const parameters = process.argv.slice(2); 9 | let numImages = 0; 10 | 11 | //Required inputs 12 | const inputtedURL = parameters[0]; 13 | let selectedDevices = parameters[1]; 14 | 15 | //Modifier inputs 16 | const modifiers = parameters.slice(2); 17 | let fullScreenStatus = false; 18 | let forceYes = false; 19 | 20 | //Check user has provided enough information 21 | if (process.argv.length <= 2 || inputtedURL === undefined || selectedDevices === undefined) { 22 | console.log('Incorrect Usage. Please use the following format:\n npm run generate-screenshots https://www.google.com "iPhone 6, iPhone 5"'); 23 | process.exit(1); 24 | } 25 | 26 | //Check for screenshots folder, if not found then create it 27 | const dir = './generated-screenshots'; 28 | if (!fs.existsSync(dir)){ 29 | console.log(`Creating folder ${dir}...`); 30 | fs.mkdirSync(dir); 31 | } 32 | 33 | //Handle device input 34 | if ( selectedDevices === "all" ) { 35 | numImages = devices.length; 36 | } else { 37 | selectedDevices = selectedDevices.split(/,\s*/); 38 | numImages = selectedDevices.length; 39 | } 40 | 41 | //Handle modifier input 42 | for (let modifier in modifiers) { 43 | switch (modifiers[modifier]) { 44 | case 'fullscreen': 45 | fullScreenStatus = true; 46 | break; 47 | case 'force-yes': 48 | forceYes = true; 49 | break; 50 | default: 51 | console.log(`Incorrect modifier provided: ${modifiers[modifier]}`); 52 | process.exit(0); 53 | } 54 | } 55 | 56 | let generate = async () => { 57 | const browser = await puppeteer.launch(); 58 | let page = await browser.newPage(); 59 | let currentDevice; 60 | 61 | try { 62 | if (selectedDevices !== "all") { 63 | for (let i=0; i