diff --git a/index.js b/index.js index b7c22ef..b550358 100644 --- a/index.js +++ b/index.js @@ -26,7 +26,7 @@ const injectLottie = ` * * Must pass either `path` or `animationData`. * - * `output` may either be any of the following: + * `output` may be any of the following: * - an image to capture the first frame only (png or jpg) * - an image pattern (eg. sprintf format 'frame-%d.png' or 'frame-%012d.jpg') * - an mp4 video file (requires FFmpeg to be installed) diff --git a/readme.md b/readme.md index 424eb70..26dbe4c 100644 --- a/readme.md +++ b/readme.md @@ -43,15 +43,10 @@ await renderLottie({ height: 128 }) -// Render the first frame of the animation as a JPEG with specific dimensions -// Note: the lottie-web renderer defaults to 'xMidyMid meet' so the resulting -// image will retain its original aspect ratio in the middle of the viewport and -// be padded with whitespace (or transparent regions if using png) +// Render the first frame of the animation as a JPEG image await renderLottie({ path: 'fixtures/bodymovin.json', - output: 'preview.jpg', - width: 640, - height: 480 + output: 'preview.jpg' }) ``` @@ -59,14 +54,49 @@ Note that all CSS styles are specified via the [JS CSS syntax](https://www.w3sch ## API -TODO + + +### [renderLottie](https://git@github.com/:transitive-bullshit/puppeteer-lottie/blob/56235fed59f7a84656f0e8508275cdfc73396dfb/index.js#L60-L382) + +Renders the given Lottie animation via Puppeteer. + +Must pass either `path` or `animationData`. + +`output` may be any of the following: + +- an image to capture the first frame only (png or jpg) +- an image pattern (eg. sprintf format 'frame-%d.png' or 'frame-%012d.jpg') +- an mp4 video file (requires FFmpeg to be installed) +- a GIF file (requires Gifski to be installed) + +Type: `function (opts): Promise` + +- `opts` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Configuration options + - `opts.output` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Path or pattern to store result + - `opts.animationData` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** JSON exported animation data + - `opts.path` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Relative path to the JSON file containing animation data + - `opts.width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional output width + - `opts.height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional output height + - `opts.jpegQuality` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** JPEG quality for frames (does nothing if using png) (optional, default `90`) + - `opts.quiet` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Set to true to disable console output (optional, default `false`) + - `opts.deviceScaleFactor` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** Window device scale factor (optional, default `1`) + - `opts.renderer` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Which lottie-web renderer to use (optional, default `'svg'`) + - `opts.rendererSettings` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Optional lottie renderer settings + - `opts.puppeteerOptions` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Optional puppeteer launch settings + - `opts.gifskiOptions` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** Optional gifski settings (only for GIF outputs) + - `opts.style` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Optional JS [CSS styles](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to apply to the animation container (optional, default `{}`) + - `opts.inject` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Optionally injects arbitrary string content into the head, style, or body elements. (optional, default `{}`) + - `opts.inject.head` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into the document + - `opts.inject.style` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into a