{"id":25478454,"url":"https://github.com/huotchu/phanshot","last_synced_at":"2026-05-01T04:36:34.089Z","repository":{"id":57322758,"uuid":"117422964","full_name":"HuotChu/phanshot","owner":"HuotChu","description":"Easy to use server-side screenshots using Phantom and NodeJS","archived":false,"fork":false,"pushed_at":"2018-01-22T19:03:58.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-12T15:53:12.848Z","etag":null,"topics":["javascript","nodejs","phantom","screenshot"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HuotChu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-14T11:06:35.000Z","updated_at":"2018-01-21T10:14:54.000Z","dependencies_parsed_at":"2022-08-25T20:10:52.656Z","dependency_job_id":null,"html_url":"https://github.com/HuotChu/phanshot","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuotChu%2Fphanshot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuotChu%2Fphanshot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuotChu%2Fphanshot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HuotChu%2Fphanshot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HuotChu","download_url":"https://codeload.github.com/HuotChu/phanshot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239489314,"owners_count":19647374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","nodejs","phantom","screenshot"],"created_at":"2025-02-18T14:33:04.508Z","updated_at":"2025-11-06T09:30:32.149Z","avatar_url":"https://github.com/HuotChu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# phanshot\nEasy to use server-side screenshot using Phantom and NodeJS\n\nCapture dynamic content such as a Google Map or an entire web page. phanshot will turn any url or string of html into a screenshot. Pass an optional selector to capture only a specific portion of the page. Several configuration parameters are available to customize how screenshots are taken, however logical defaults are provided for easy implementation of common use cases. \n\nInstall via [npm](https://www.npmjs.com):\n\n```bash\nnpm install phanshot --save\n```\n\n## Current Development (*coming soon*)\n-  Detect when DOM element is loaded within iframe to reduce latency\n-  Support for offsets passed in as params\n\n## Latest Version\n1.2.0 is a complete refactor of phanshot. Improved stability, optional iframe loader support, configurable wait time, and more exposed methods for hackers needing additional flexibility.\n\n## Getting Started\nThis is a **NEW** project; *more* documentation is coming soon.\n\n### Using the phanshot router\nIf you are using Express for your routes, then simply include the phanshot router in your app start file (usually app.js or index.js)\n```javascript\nconst app = express();\nconst { route } = require('phanshot');\n\napp.use( '/screenshot', route );\n```\n\n### Don't need phanshot router? phanshot direct...\n```javascript\nconst { phanshot } = require('phanshot');\n\nlet base64stream = phanshot.capture({/*config*/});\n\n/* returns a promise... */\nbase64stream.then( img =\u003e {\n    // do something with img stream; such as pipe to the response\n    img.pipe( res );\n} );\n```\n\n### config\nWhen calling phanshot, you pass it a JSON config.\nOnly one of `url` or `html` are required, all other fields are optional.\n\n```javascript\n/* Sample config =\u003e screenshot of entire google homepage */\n{\n  url: \"https://google.com\"\n}\n```\n\n```javascript\n/* Sample config =\u003e screenshot from html */\n{\n  \"html\":\"\u003chtml\u003e\u003chead\u003e\u003c/head\u003e\u003cbody style='background-color:#FFF'\u003e\u003cdiv\u003eThis is a test\u003c/div\u003e\u003cdiv style='width:200px;height:200px;background-color:#0000FF' id='blue'\u003e\u0026nbsp;\u003c/div\u003e\u003c/body\u003e\u003c/html\u003e\"\n}\n```\n\nIn the case where you only want to capture a section of a page, a **selector** can be added to the config to identify the container element.\n\nFor example, to capture only the map contained in the `#map` div shown on https://hpneo.github.io/gmaps/examples/overlays.html\n\n```javascript\n{  \n  \"url\": \"https://hpneo.github.io/gmaps/examples/overlays.html\",\n  \"selector\": \"#map\"\n}\n```\n\nBe careful to target the correct element! The map shown in the next example is loaded within an iframe, making the `#googft-mapCanvas` element unreachable. Correctly passing the iframe id `#preview` will capture the map.\n\n```javascript\n{  \n  \"url\": \"http://harrywood.co.uk/maps/examples/google-maps/add-osm-credits.view.html\",\n  \"selector\": \"#preview\"\n}\n```\n\nThe complete list of config options and their defaults:\n```javascript\n{  \n  \"url\": false,\n  \"html\": false,\n  \"selector\": false,\n  \"rect\": false, /* entire viewport */\n  \"viewport\": { \"width\": 1366, \"height\": 768 },\n  \"useFrame\": false,\n  \"wait\": 9000,\n  \"phantom\": [ \"--ignore-ssl-errors=yes\", \"--web-security=no\" ]\n}\n```\n\n- **url** - web address to capture as a screenshot\n- **html** - string of html to render as an image; css is supported\n- **selector** - valid querySelector (css selector) of an element to capture\n- **rect** - object with dimensions to create a bounding box for the screenshot\n- **viewport** - size of the phantom viewport (browser)\n- **useFrame** - render the target page in an iframe before rendering to image\n- **wait** - milliseconds to let target page load before rendering to image\n- **phantom** - phantom specific options\n\n## Example JSON body (config) sent in a request to phanshot\n### Screenshot from URL of just the Google logo\n```javascript\n{  \n  \"url\":\"https://google.com\",\n  \"selector\":\"#hplogo\"\n}\n```\n\n### Screenshot from HTML: just the blue box\n```javascript\n{  \n  \"html\":\"\u003chtml\u003e\u003chead\u003e\u003c/head\u003e\u003cbody style='background-color:#FFF'\u003e\u003cdiv\u003eThis is a test\u003c/div\u003e\u003cdiv style='width:200px;height:200px;background-color:#0000FF' id='blue'\u003e\u0026nbsp;\u003c/div\u003e\u003c/body\u003e\u003c/html\u003e\",\n  \"selector\":\"#blue\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuotchu%2Fphanshot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuotchu%2Fphanshot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuotchu%2Fphanshot/lists"}