Skip to content

Commit

Permalink
2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjroebuck
cjroebuck committed Oct 30, 2023
1 parent b2e5ae9 commit 44b1c71
Show file tree
Hide file tree
Showing 15 changed files with 1,876 additions and 7,328 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
4 changes: 0 additions & 4 deletions .babelrc
View file

This file was deleted.

76 changes: 38 additions & 38 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# urlbox-screenshots
# urlbox-node

Quickly generate screenshots using the urlbox.io screenshot as a service API.
Quickly generate screenshots, PDFs and other renders using the urlbox.io screenshot as a service API.

Signup at [Urlbox.io](https://urlbox.io) to get your API key and secret.
Signup at [Urlbox.io](https://urlbox.io) to get an API key and secret.

## Installation

Expand All @@ -13,20 +13,20 @@ npm install urlbox --save
## Example

```js
import Urlbox from 'urlbox';
import Urlbox from "urlbox";

// Get your API key and secret from urlbox.io
const urlbox = Urlbox(YOUR_API_KEY, YOUR_API_SECRET);

// See all urlbox screenshot options at urlbox.io/docs
const options = {
url: 'github.com',
url: "github.com",
thumb_width: 600,
format: 'jpg',
quality: 80
}
format: "jpg",
quality: 80,
};

const imgUrl = urlbox.buildUrl(options);
const imgUrl = urlbox.generateRenderLink(options);
// https://api.urlbox.io/v1/YOUR_API_KEY/TOKEN/jpg?url=github.com&thumb_width=600&quality=80
```

Expand All @@ -36,32 +36,32 @@ Now stick that url in an img tag to render the screenshot!

Available options:

| Option | Default | Description |
| --- | --- | --- |
| `url` | - | The URL of the website you want to screenshot |
| `width` | 1280 | Viewport width of the browser in pixels |
| `height` | 1024 | Viewport height of the browser in pixels |
| `selector` | - | Take a screenshot of the element that matches this selector |
| `thumb_width` | - | Width in pixels of the generated thumbnail, leave off for full-size screenshot |
| `format` | png | Format of the resulting screenshot image (`png` or `jpg`)|
| `user_agent` | - | User-Agent string used to emulate a particular client. |
| `cookie` | - | Set a cookie value before taking a screenshot. E.g. OptIn=true. Can be set multiple times to set more than one cookie. |
| `delay` | - | Amount of time to wait in milliseconds before urlbox takes the screenshot |
| `wait_for` | - | Waits for the element specified by this selector to be visible on the page before taking a screenshot |
| `timeout` | 30000 | Amount of time to wait in milliseconds for the website at url to respond |
| `full_page` | false | Specify whether to capture the full-length of the website |
| `flash` | false | Enable the flash plugin for flash using websites |
| `force` | false | Take a fresh screenshot instead of getting a cached version |
| `ttl` | 2592000 (30 days) | Short for 'time to live'. Number of seconds to keep a screenshot in the cache. Note the default is also the maximum value for this option. |
| `quality` | 80 | JPEG only - image quality of resulting screenshot (0-100) |
| `disable_js` | false | Turn off javascript on target url to prevent popups |
| `retina` | false | Take a 'retina' or high definition screenshot equivalent to setting a device pixel ratio of 2.0 or @2x. Please note that retina screenshots will be double the normal dimensions and will normally take slightly longer to process due to the much bigger image size. |
| `click` | - | Element selector that is clicked before taking a screenshot e.g. #clickme would click the element with id="clickme" |
| `hover` | - | Element selector that is hovered before taking a screenshot e.g. #hoverme would hover over the element with id="clickme" |
| `bg_color` | - | Hex code or css color string. Some websites don't set a body background colour, and will show up as transparent backgrounds with PNG or black when using JPG. Use this setting to set a background colour. If the website explicitly sets a transparent background on the html or body elements, this setting will be overridden. |
| `crop_width` | - | Crop the width of the screenshot to this size in pixels |
| `hide_selector` | - | Hides all elements that match the element selector by setting their style to `display:none !important;`. Useful for hiding popups. |
| `highlight` | - | Word to highlight on the page before capturing a screenshot |
| `highlightfg` | white | Text color of the highlighted word |
| `highlightbg` | red | Background color of the highlighted word |
| `use_s3` | false | Save the screenshot directly to the S3 bucket configured on your account |
| Option | Default | Description |
| --------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `url` | - | The URL of the website you want to screenshot |
| `width` | 1280 | Viewport width of the browser in pixels |
| `height` | 1024 | Viewport height of the browser in pixels |
| `selector` | - | Take a screenshot of the element that matches this selector |
| `thumb_width` | - | Width in pixels of the generated thumbnail, leave off for full-size screenshot |
| `format` | png | Format of the resulting screenshot image (`png` or `jpg`) |
| `user_agent` | - | User-Agent string used to emulate a particular client. |
| `cookie` | - | Set a cookie value before taking a screenshot. E.g. OptIn=true. Can be set multiple times to set more than one cookie. |
| `delay` | - | Amount of time to wait in milliseconds before urlbox takes the screenshot |
| `wait_for` | - | Waits for the element specified by this selector to be visible on the page before taking a screenshot |
| `timeout` | 30000 | Amount of time to wait in milliseconds for the website at url to respond |
| `full_page` | false | Specify whether to capture the full-length of the website |
| `flash` | false | Enable the flash plugin for flash using websites |
| `force` | false | Take a fresh screenshot instead of getting a cached version |
| `ttl` | 2592000 (30 days) | Short for 'time to live'. Number of seconds to keep a screenshot in the cache. Note the default is also the maximum value for this option. |
| `quality` | 80 | JPEG only - image quality of resulting screenshot (0-100) |
| `disable_js` | false | Turn off javascript on target url to prevent popups |
| `retina` | false | Take a 'retina' or high definition screenshot equivalent to setting a device pixel ratio of 2.0 or @2x. Please note that retina screenshots will be double the normal dimensions and will normally take slightly longer to process due to the much bigger image size. |
| `click` | - | Element selector that is clicked before taking a screenshot e.g. #clickme would click the element with id="clickme" |
| `hover` | - | Element selector that is hovered before taking a screenshot e.g. #hoverme would hover over the element with id="clickme" |
| `bg_color` | - | Hex code or css color string. Some websites don't set a body background colour, and will show up as transparent backgrounds with PNG or black when using JPG. Use this setting to set a background colour. If the website explicitly sets a transparent background on the html or body elements, this setting will be overridden. |
| `crop_width` | - | Crop the width of the screenshot to this size in pixels |
| `hide_selector` | - | Hides all elements that match the element selector by setting their style to `display:none !important;`. Useful for hiding popups. |
| `highlight` | - | Word to highlight on the page before capturing a screenshot |
| `highlightfg` | white | Text color of the highlighted word |
| `highlightbg` | red | Background color of the highlighted word |
| `use_s3` | false | Save the screenshot directly to the S3 bucket configured on your account |
11 changes: 11 additions & 0 deletions fixup
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
cat >dist/cjs/package.json <<!EOF
{
"type": "commonjs"
}
!EOF

cat >dist/mjs/package.json <<!EOF
{
"type": "module"
}
!EOF
Loading

0 comments on commit 44b1c71

Please sign in to comment.