Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
puppeteer-render-text
Advanced tools
puppeteer-render-text - npm Package Compare versions
Comparing version 0.0.1 to 0.1.0
23
index.js
@@ -17,2 +17,25 @@ 'use strict' | ||
| /** | ||
| * Renders the given text / html via puppeteer. | ||
| * | ||
| * Asynchronously returns the generated html page as a string for debugging purposes. | ||
| * | ||
| * @name renderText | ||
| * @function | ||
| * | ||
| * @param {object} opts - Configuration options | ||
| * @param {string} opts.text - HTML content to render | ||
| * @param {string} opts.output - Path of image file to output result | ||
| * @param {number} [opts.width] - Optional max width for word-wrap | ||
| * @param {number} [opts.height] - Optional max height to clip overflow | ||
| * @param {string} [opts.loadFontFamily] - Optional font family to load with fontfaceobserver | ||
| * @param {boolean} [opts.loadGoogleFont=false] - Whether or not to load and wait for `opts.style.fontFamily` as one or more google fonts | ||
| * @param {object} [opts.style={}] - JS [CSS styles](https://www.w3schools.com/jsref/dom_obj_style.asp) to apply to the text's container div | ||
| * @param {object} [opts.inject={}] - Optionally injects arbitrary string content into the head, style, or body elements. | ||
| * @param {string} [opts.inject.head] - Optionally injected into the document <head> | ||
| * @param {string} [opts.inject.style] - Optionally injected into a <style> tag within the document <head> | ||
| * @param {string} [opts.inject.body] - Optionally injected into the document <body> | ||
| * | ||
| * @return {Promise} | ||
| */ | ||
| module.exports = async (opts) => { | ||
@@ -19,0 +42,0 @@ const { |
| { | ||
| "name": "puppeteer-render-text", | ||
| "version": "0.0.1", | ||
| "description": "Robust text + html renderer using headless chrome transparent screenshots.", | ||
| "version": "0.1.0", | ||
| "description": "Robust text renderer using headless chrome.", | ||
| "main": "index.js", | ||
@@ -10,3 +10,3 @@ "repository": "transitive-bullshit/puppeteer-render-text", | ||
| "scripts": { | ||
| "docs": "update-markdown-jsdoc", | ||
| "docs": "update-markdown-jsdoc --no-markdown-toc", | ||
| "test": "ava -v && standard *.js" | ||
@@ -13,0 +13,0 @@ }, |
| # puppeteer-render-text | ||
| > Robust text + html renderer using headless chrome transparent screenshots. | ||
| > Robust text renderer using headless chrome. | ||
@@ -9,14 +9,16 @@ [](https://www.npmjs.com/package/puppeteer-render-text) [](https://travis-ci.com/transitive-bullshit/puppeteer-render-text) [](https://standardjs.com) | ||
| ImageMagick is the traditional unix tool to programatically [render text](http://www.imagemagick.org/Usage/text/), and while it works very well for simple use cases, trying to use it to render rich text or html is very difficult. [Pango](https://www.pango.org/) is another option that's been around for ages, but both options suffer from archaic syntax and bare minimum rich text support. | ||
| ImageMagick is the traditional unix tool to programatically [render text](http://www.imagemagick.org/Usage/text/), and while it works very well for simple use cases, trying to use it to render rich text or html is very difficult. [Pango](https://www.pango.org/) is another option that's been around for ages, but both suffer from archaic syntax and minimal rich text support. | ||
| [Puppeteer](https://github.com/GoogleChrome/puppeteer), on the other hand, allows for robust, headless chrome screenshots with best-in-class support for all modern html / text / font features. This module's purpose is to make it easy to use headless chrome to render generic text and html snippets to images. | ||
| [Puppeteer](https://github.com/GoogleChrome/puppeteer), on the other hand, allows for robust, headless chrome screenshots with best-in-class support for all modern html / text / font features. | ||
| **This module makes it easy to use headless chrome to render text + html to images.** | ||
| ## Features | ||
| - built-in [fontfaceobserver](https://fontfaceobserver.com/) support | ||
| - easily load [Google fonts](https://fonts.google.com/) | ||
| - optional word-wrap | ||
| - main context is just **html** | ||
| - styling is done via [**css**](https://www.w3schools.com/jsref/dom_obj_style.asp) | ||
| - thoroughly tested | ||
| - built-in [fontfaceobserver](https://fontfaceobserver.com/) | ||
| - easily load [google fonts](https://fonts.google.com/) | ||
| - optional word-wrap | ||
| - main context is just **html** | ||
| - styling is done via [**css**](https://www.w3schools.com/jsref/dom_obj_style.asp) | ||
| - thoroughly tested | ||
@@ -32,5 +34,5 @@ ## Install | ||
| ```js | ||
| const renderText = require('.') | ||
| const renderText = require('puppeteer-render-text') | ||
| // built-in font with no word-wrap | ||
| // render built-in font with no word-wrap | ||
| await renderText({ | ||
@@ -45,3 +47,3 @@ text: 'hello world', | ||
| // custom google font with word-wrap at 400px | ||
| // render custom google font with word-wrap at 400px | ||
| await renderText({ | ||
@@ -60,9 +62,32 @@ text: 'headless chrome is awesome', | ||
| Note that all CSS styles are specified via the [JS CSS syntax](https://www.w3schools.com/jsref/dom_obj_style.asp), which uses camelCase instead of hyphens. This is, for instance, what [React](https://reactjs.org/docs/dom-elements.html#style) uses for its inline styles. | ||
| ## API | ||
| TODO | ||
| <!-- Generated by documentation.js. Update this documentation by updating the source code. --> | ||
| ### [renderText](https://github.com/transitive-bullshit/puppeteer-render-text/blob/4047853f4343ada45c331dee7fded3e90d481d34/index.js#L40-L155) | ||
| Renders the given text / html via puppeteer. | ||
| Asynchronously returns the generated html page as a string for debugging purposes. | ||
| Type: `function (opts): Promise` | ||
| - `opts` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Configuration options | ||
| - `opts.text` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** HTML content to render | ||
| - `opts.output` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Path of image file to output result | ||
| - `opts.width` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional max width for word-wrap | ||
| - `opts.height` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)?** Optional max height to clip overflow | ||
| - `opts.loadFontFamily` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optional font family to load with fontfaceobserver | ||
| - `opts.loadGoogleFont` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Whether or not to load and wait for `opts.style.fontFamily` as one or more google fonts (optional, default `false`) | ||
| - `opts.style` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** JS [CSS styles](https://www.w3schools.com/jsref/dom_obj_style.asp) to apply to the text's container div (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 <head> | ||
| - `opts.inject.style` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into a <style> tag within the document <head> | ||
| - `opts.inject.body` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Optionally injected into the document <body> | ||
| ## Related | ||
| - [puppeteer](https://github.com/GoogleChrome/puppeteer) - Headless Chrome Node API. | ||
| - [puppeteer](https://github.com/GoogleChrome/puppeteer) - Headless Chrome Node API. | ||
@@ -69,0 +94,0 @@ ## License |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.63%
17394
- Lines of code
- increased by10.55%
241
- Number of lines in readme file
- increased by36.76%
93
Worsened metrics
- Number of downloads
- decreased by-43.48%
13
No dependency changes