|
5 | 5 | ## This is the documentation for version 2.0.0-alpha
|
6 | 6 | Alpha versions of 2.0 can be installed using `npm install canvas@next`.
|
7 | 7 |
|
| 8 | +See the [changelog](https://github.com/Automattic/node-canvas/blob/master/CHANGELOG.md) |
| 9 | +for a guide to upgrading from 1.x to 2.x. |
| 10 | + |
8 | 11 | **For version 1.x documentation, see [the v1.x branch](https://github.com/Automattic/node-canvas/tree/v1.x)**
|
9 | 12 |
|
10 | 13 | -----
|
@@ -80,9 +83,11 @@ loadImage('examples/images/lime-cat.jpg').then((image) => {
|
80 | 83 | })
|
81 | 84 | ```
|
82 | 85 |
|
83 |
| -## Non-Standard API |
| 86 | +## Non-Standard APIs |
84 | 87 |
|
85 |
| - node-canvas extends the canvas API to provide interfacing with node, for example streaming PNG data, converting to a `Buffer` instance, etc. Among the interfacing API, in some cases the drawing API has been extended for SSJS image manipulation / creation usage, however keep in mind these additions may fail to render properly within browsers. |
| 88 | +node-canvas implements the [HTML Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) as closely as possible. |
| 89 | +(See [Compatibility Status](https://github.com/Automattic/node-canvas/wiki/Compatibility-Status) |
| 90 | +for the current API compliance.) All non-standard APIs are documented below. |
86 | 91 |
|
87 | 92 | ### Image#src=Buffer
|
88 | 93 |
|
@@ -125,84 +130,146 @@ img.dataMode = Image.MODE_MIME | Image.MODE_IMAGE; // Both are tracked
|
125 | 130 |
|
126 | 131 | If image data is not tracked, and the Image is drawn to an image rather than a PDF canvas, the output will be junk. Enabling mime data tracking has no benefits (only a slow down) unless you are generating a PDF.
|
127 | 132 |
|
128 |
| -### Canvas#pngStream(options) |
| 133 | +### Canvas#toBuffer() |
129 | 134 |
|
130 |
| - To create a `PNGStream` simply call `canvas.pngStream()`, and the stream will start to emit _data_ events, emitting _end_ when the data stream ends. If an exception occurs the _error_ event is emitted. |
| 135 | +Creates a [`Buffer`](https://nodejs.org/api/buffer.html) object representing the |
| 136 | +image contained in the canvas. |
| 137 | + |
| 138 | +> `canvas.toBuffer((err: Error|null, result: Buffer) => void[, mimeType[, config]]) => void` |
| 139 | +> `canvas.toBuffer([mimeType[, config]]) => Buffer` |
| 140 | +
|
| 141 | +* **callback** If provided, the buffer will be provided in the callback instead |
| 142 | + of being returned by the function. Invoked with an error as the first argument |
| 143 | + if encoding failed, or the resulting buffer as the second argument if it |
| 144 | + succeeded. Not supported for mimeType `raw` or for PDF or SVG canvases (there |
| 145 | + is no async work to do in those cases). |
| 146 | +* **mimeType** A string indicating the image format. Valid options are `image/png`, |
| 147 | + `image/jpeg` (if node-canvas was built with JPEG support) and `raw` (unencoded |
| 148 | + ARGB32 data in native-endian byte order, top-to-bottom). Defaults to |
| 149 | + `image/png`. If the canvas is a PDF or SVG canvas, this argument is ignored |
| 150 | + and a PDF or SVG is returned always. |
| 151 | +* **config** |
| 152 | + * For `image/jpeg` an object specifying the quality (0 to 1), if progressive |
| 153 | + compression should be used and/or if chroma subsampling should be used: |
| 154 | + `{quality: 0.75, progressive: false, chromaSubsampling: true}`. All |
| 155 | + properties are optional. |
| 156 | + * For `image/png`, an object specifying the ZLIB compression level (between 0 |
| 157 | + and 9), the compression filter(s), the palette (indexed PNGs only) and/or |
| 158 | + the background palette index (indexed PNGs only): |
| 159 | + `{compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0}`. |
| 160 | + All properties are optional. |
| 161 | + |
| 162 | +**Return value** |
| 163 | + |
| 164 | +If no callback is provided, a [`Buffer`](https://nodejs.org/api/buffer.html). |
| 165 | +If a callback is provided, none. |
| 166 | + |
| 167 | +#### Examples |
131 | 168 |
|
132 | 169 | ```javascript
|
133 |
| -var fs = require('fs') |
134 |
| - , out = fs.createWriteStream(__dirname + '/text.png') |
135 |
| - , stream = canvas.pngStream(); |
| 170 | +// Default: buf contains a PNG-encoded image |
| 171 | +const buf = canvas.toBuffer() |
136 | 172 |
|
137 |
| -stream.pipe(out); |
| 173 | +// PNG-encoded, zlib compression level 3 for faster compression but bigger files, no filtering |
| 174 | +const buf2 = canvas.toBuffer('image/png', {compressionLevel: 3, filters: canvas.PNG_FILTER_NONE}) |
138 | 175 |
|
139 |
| -out.on('finish', function(){ |
140 |
| - console.log('The PNG file was created.'); |
141 |
| -}); |
| 176 | +// JPEG-encoded, 50% quality |
| 177 | +const buf3 = canvas.toBuffer('image/jpeg', {quality: 0.5}) |
| 178 | + |
| 179 | +// Asynchronous PNG |
| 180 | +canvas.toBuffer((err, buf) => { |
| 181 | + if (err) throw err; // encoding failed |
| 182 | + // buf is PNG-encoded image |
| 183 | +}) |
| 184 | + |
| 185 | +canvas.toBuffer((err, buf) => { |
| 186 | + if (err) throw err; // encoding failed |
| 187 | + // buf is JPEG-encoded image at 95% quality |
| 188 | + // Note that this callback is currently called synchronously. |
| 189 | +}, 'image/jpeg', {quality: 0.95}) |
| 190 | + |
| 191 | +// ARGB32 pixel values, native-endian |
| 192 | +const buf4 = canvas.toBuffer('raw') |
| 193 | +const {stride, width} = canvas |
| 194 | +// In memory, this is `canvas.height * canvas.stride` bytes long. |
| 195 | +// The top row of pixels, in ARGB order, left-to-right, is: |
| 196 | +const topPixelsARGBLeftToRight = buf4.slice(0, width * 4) |
| 197 | +// And the third row is: |
| 198 | +const row3 = buf4.slice(2 * stride, 2 * stride + width * 4) |
| 199 | + |
| 200 | +// SVG and PDF canvases ignore the mimeType argument |
| 201 | +const myCanvas = createCanvas(w, h, 'pdf') |
| 202 | +myCanvas.toBuffer() // returns a buffer containing a PDF-encoded canvas |
| 203 | +``` |
| 204 | + |
| 205 | +### Canvas#pngStream(options) |
| 206 | + |
| 207 | +Creates a [`ReadableStream`](https://nodejs.org/api/stream.html#stream_class_stream_readable) |
| 208 | +that emits PNG-encoded data. |
| 209 | + |
| 210 | +> `canvas.pngStream([config]) => ReadableStream` |
| 211 | +
|
| 212 | +* `config` An object specifying the ZLIB compression level (between 0 and 9), |
| 213 | + the compression filter(s), the palette (indexed PNGs only) and/or the |
| 214 | + background palette index (indexed PNGs only): |
| 215 | + `{compressionLevel: 6, filters: canvas.PNG_ALL_FILTERS, palette: undefined, backgroundIndex: 0}`. |
| 216 | + All properties are optional. |
| 217 | + |
| 218 | +#### Examples |
| 219 | + |
| 220 | +```javascript |
| 221 | +const fs = require('fs') |
| 222 | +const out = fs.createWriteStream(__dirname + '/test.png') |
| 223 | +const stream = canvas.pngStream() |
| 224 | +stream.pipe(out) |
| 225 | +out.on('finish', () => console.log('The PNG file was created.')) |
142 | 226 | ```
|
143 | 227 |
|
144 | 228 | To encode indexed PNGs from canvases with `pixelFormat: 'A8'` or `'A1'`, provide an options object:
|
145 | 229 |
|
146 | 230 | ```js
|
147 |
| -var palette = new Uint8ClampedArray([ |
| 231 | +const palette = new Uint8ClampedArray([ |
148 | 232 | //r g b a
|
149 | 233 | 0, 50, 50, 255, // index 1
|
150 | 234 | 10, 90, 90, 255, // index 2
|
151 | 235 | 127, 127, 255, 255
|
152 | 236 | // ...
|
153 |
| -]); |
| 237 | +]) |
154 | 238 | canvas.pngStream({
|
155 | 239 | palette: palette,
|
156 | 240 | backgroundIndex: 0 // optional, defaults to 0
|
157 | 241 | })
|
158 | 242 | ```
|
159 | 243 |
|
160 |
| -### Canvas#jpegStream() and Canvas#syncJPEGStream() |
161 |
| - |
162 |
| -You can likewise create a `JPEGStream` by calling `canvas.jpegStream()` with |
163 |
| -some optional parameters; functionality is otherwise identical to |
164 |
| -`pngStream()`. See `examples/crop.js` for an example. |
165 |
| - |
166 |
| -_Note: At the moment, `jpegStream()` is the same as `syncJPEGStream()`, both |
167 |
| -are synchronous_ |
168 |
| - |
169 |
| -```javascript |
170 |
| -var stream = canvas.jpegStream({ |
171 |
| - bufsize: 4096 // output buffer size in bytes, default: 4096 |
172 |
| - , quality: 75 // JPEG quality (0-100) default: 75 |
173 |
| - , progressive: false // true for progressive compression, default: false |
174 |
| - , chromaSubsampling: true // false to disable 2x2 subsampling of the chroma components, default: true |
175 |
| -}); |
176 |
| -``` |
177 |
| - |
178 |
| -### Canvas#toBuffer() |
| 244 | +### Canvas#jpegStream() |
179 | 245 |
|
180 |
| -A call to `Canvas#toBuffer()` will return a node `Buffer` instance containing image data. |
| 246 | +Creates a [`ReadableStream`](https://nodejs.org/api/stream.html#stream_class_stream_readable) |
| 247 | +that emits JPEG-encoded data. |
181 | 248 |
|
182 |
| -```javascript |
183 |
| -// PNG Buffer, default settings |
184 |
| -var buf = canvas.toBuffer(); |
| 249 | +_Note: At the moment, `jpegStream()` is synchronous under the hood. That is, it |
| 250 | +runs in the main thread, not in the libuv threadpool._ |
185 | 251 |
|
186 |
| -// PNG Buffer, zlib compression level 3 (from 0-9), faster but bigger |
187 |
| -var buf2 = canvas.toBuffer(undefined, 3, canvas.PNG_FILTER_NONE); |
| 252 | +> `canvas.pngStream([config]) => ReadableStream` |
188 | 253 |
|
189 |
| -// ARGB32 Buffer, native-endian |
190 |
| -var buf3 = canvas.toBuffer('raw'); |
191 |
| -var stride = canvas.stride; |
192 |
| -// In memory, this is `canvas.height * canvas.stride` bytes long. |
193 |
| -// The top row of pixels, in ARGB order, left-to-right, is: |
194 |
| -var topPixelsARGBLeftToRight = buf3.slice(0, canvas.width * 4); |
195 |
| -var row3 = buf3.slice(2 * canvas.stride, 2 * canvas.stride + canvas.width * 4); |
196 |
| -``` |
| 254 | +* `config` an object specifying the quality (0 to 1), if progressive compression |
| 255 | + should be used and/or if chroma subsampling should be used: |
| 256 | + `{quality: 0.75, progressive: false, chromaSubsampling: true}`. All properties |
| 257 | + are optional. |
197 | 258 |
|
198 |
| -### Canvas#toBuffer() async |
199 |
| - |
200 |
| -Optionally we may pass a callback function to `Canvas#toBuffer()`, and this process will be performed asynchronously, and will `callback(err, buf)`. |
| 259 | +#### Examples |
201 | 260 |
|
202 | 261 | ```javascript
|
203 |
| -canvas.toBuffer(function(err, buf){ |
204 |
| - |
205 |
| -}); |
| 262 | +const fs = require('fs') |
| 263 | +const out = fs.createWriteStream(__dirname + '/test.jpeg') |
| 264 | +const stream = canvas.jpegStream() |
| 265 | +stream.pipe(out) |
| 266 | +out.on('finish', () => console.log('The JPEG file was created.')) |
| 267 | + |
| 268 | +// Disable 2x2 chromaSubsampling for deeper colors and use a higher quality |
| 269 | +const stream = canvas.jpegStream({ |
| 270 | + quality: 95, |
| 271 | + chromaSubsampling: false |
| 272 | +}) |
206 | 273 | ```
|
207 | 274 |
|
208 | 275 | ### Canvas#toDataURL() sync and async
|
|
0 commit comments