UNPKG

20.8 kBJavaScriptView Raw
1// Copyright 2013 Lovell Fuller and others.
2// SPDX-License-Identifier: Apache-2.0
3
4'use strict';
5
6const is = require('./is');
7
8/**
9 * Weighting to apply when using contain/cover fit.
10 * @member
11 * @private
12 */
13const gravity = {
14 center: 0,
15 centre: 0,
16 north: 1,
17 east: 2,
18 south: 3,
19 west: 4,
20 northeast: 5,
21 southeast: 6,
22 southwest: 7,
23 northwest: 8
24};
25
26/**
27 * Position to apply when using contain/cover fit.
28 * @member
29 * @private
30 */
31const position = {
32 top: 1,
33 right: 2,
34 bottom: 3,
35 left: 4,
36 'right top': 5,
37 'right bottom': 6,
38 'left bottom': 7,
39 'left top': 8
40};
41
42/**
43 * How to extend the image.
44 * @member
45 * @private
46 */
47const extendWith = {
48 background: 'background',
49 copy: 'copy',
50 repeat: 'repeat',
51 mirror: 'mirror'
52};
53
54/**
55 * Strategies for automagic cover behaviour.
56 * @member
57 * @private
58 */
59const strategy = {
60 entropy: 16,
61 attention: 17
62};
63
64/**
65 * Reduction kernels.
66 * @member
67 * @private
68 */
69const kernel = {
70 nearest: 'nearest',
71 linear: 'linear',
72 cubic: 'cubic',
73 mitchell: 'mitchell',
74 lanczos2: 'lanczos2',
75 lanczos3: 'lanczos3'
76};
77
78/**
79 * Methods by which an image can be resized to fit the provided dimensions.
80 * @member
81 * @private
82 */
83const fit = {
84 contain: 'contain',
85 cover: 'cover',
86 fill: 'fill',
87 inside: 'inside',
88 outside: 'outside'
89};
90
91/**
92 * Map external fit property to internal canvas property.
93 * @member
94 * @private
95 */
96const mapFitToCanvas = {
97 contain: 'embed',
98 cover: 'crop',
99 fill: 'ignore_aspect',
100 inside: 'max',
101 outside: 'min'
102};
103
104/**
105 * @private
106 */
107function isRotationExpected (options) {
108 return (options.angle % 360) !== 0 || options.useExifOrientation === true || options.rotationAngle !== 0;
109}
110
111/**
112 * @private
113 */
114function isResizeExpected (options) {
115 return options.width !== -1 || options.height !== -1;
116}
117
118/**
119 * Resize image to `width`, `height` or `width x height`.
120 *
121 * When both a `width` and `height` are provided, the possible methods by which the image should **fit** these are:
122 * - `cover`: (default) Preserving aspect ratio, attempt to ensure the image covers both provided dimensions by cropping/clipping to fit.
123 * - `contain`: Preserving aspect ratio, contain within both provided dimensions using "letterboxing" where necessary.
124 * - `fill`: Ignore the aspect ratio of the input and stretch to both provided dimensions.
125 * - `inside`: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
126 * - `outside`: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.
127 *
128 * Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
129 *
130 * <img alt="Examples of various values for the fit property when resizing" width="100%" style="aspect-ratio: 998/243" src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/api-resize-fit.svg">
131 *
132 * When using a **fit** of `cover` or `contain`, the default **position** is `centre`. Other options are:
133 * - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.
134 * - `sharp.gravity`: `north`, `northeast`, `east`, `southeast`, `south`, `southwest`, `west`, `northwest`, `center` or `centre`.
135 * - `sharp.strategy`: `cover` only, dynamically crop using either the `entropy` or `attention` strategy.
136 *
137 * Some of these values are based on the [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
138 *
139 * The strategy-based approach initially resizes so one dimension is at its target length
140 * then repeatedly ranks edge regions, discarding the edge with the lowest score based on the selected strategy.
141 * - `entropy`: focus on the region with the highest [Shannon entropy](https://en.wikipedia.org/wiki/Entropy_%28information_theory%29).
142 * - `attention`: focus on the region with the highest luminance frequency, colour saturation and presence of skin tones.
143 *
144 * Possible downsizing kernels are:
145 * - `nearest`: Use [nearest neighbour interpolation](http://en.wikipedia.org/wiki/Nearest-neighbor_interpolation).
146 * - `linear`: Use a [triangle filter](https://en.wikipedia.org/wiki/Triangular_function).
147 * - `cubic`: Use a [Catmull-Rom spline](https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline).
148 * - `mitchell`: Use a [Mitchell-Netravali spline](https://www.cs.utexas.edu/~fussell/courses/cs384g-fall2013/lectures/mitchell/Mitchell.pdf).
149 * - `lanczos2`: Use a [Lanczos kernel](https://en.wikipedia.org/wiki/Lanczos_resampling#Lanczos_kernel) with `a=2`.
150 * - `lanczos3`: Use a Lanczos kernel with `a=3` (the default).
151 *
152 * When upsampling, these kernels map to `nearest`, `linear` and `cubic` interpolators.
153 * Downsampling kernels without a matching upsampling interpolator map to `cubic`.
154 *
155 * Only one resize can occur per pipeline.
156 * Previous calls to `resize` in the same pipeline will be ignored.
157 *
158 * @example
159 * sharp(input)
160 * .resize({ width: 100 })
161 * .toBuffer()
162 * .then(data => {
163 * // 100 pixels wide, auto-scaled height
164 * });
165 *
166 * @example
167 * sharp(input)
168 * .resize({ height: 100 })
169 * .toBuffer()
170 * .then(data => {
171 * // 100 pixels high, auto-scaled width
172 * });
173 *
174 * @example
175 * sharp(input)
176 * .resize(200, 300, {
177 * kernel: sharp.kernel.nearest,
178 * fit: 'contain',
179 * position: 'right top',
180 * background: { r: 255, g: 255, b: 255, alpha: 0.5 }
181 * })
182 * .toFile('output.png')
183 * .then(() => {
184 * // output.png is a 200 pixels wide and 300 pixels high image
185 * // containing a nearest-neighbour scaled version
186 * // contained within the north-east corner of a semi-transparent white canvas
187 * });
188 *
189 * @example
190 * const transformer = sharp()
191 * .resize({
192 * width: 200,
193 * height: 200,
194 * fit: sharp.fit.cover,
195 * position: sharp.strategy.entropy
196 * });
197 * // Read image data from readableStream
198 * // Write 200px square auto-cropped image data to writableStream
199 * readableStream
200 * .pipe(transformer)
201 * .pipe(writableStream);
202 *
203 * @example
204 * sharp(input)
205 * .resize(200, 200, {
206 * fit: sharp.fit.inside,
207 * withoutEnlargement: true
208 * })
209 * .toFormat('jpeg')
210 * .toBuffer()
211 * .then(function(outputBuffer) {
212 * // outputBuffer contains JPEG image data
213 * // no wider and no higher than 200 pixels
214 * // and no larger than the input image
215 * });
216 *
217 * @example
218 * sharp(input)
219 * .resize(200, 200, {
220 * fit: sharp.fit.outside,
221 * withoutReduction: true
222 * })
223 * .toFormat('jpeg')
224 * .toBuffer()
225 * .then(function(outputBuffer) {
226 * // outputBuffer contains JPEG image data
227 * // of at least 200 pixels wide and 200 pixels high while maintaining aspect ratio
228 * // and no smaller than the input image
229 * });
230 *
231 * @example
232 * const scaleByHalf = await sharp(input)
233 * .metadata()
234 * .then(({ width }) => sharp(input)
235 * .resize(Math.round(width * 0.5))
236 * .toBuffer()
237 * );
238 *
239 * @param {number} [width] - How many pixels wide the resultant image should be. Use `null` or `undefined` to auto-scale the width to match the height.
240 * @param {number} [height] - How many pixels high the resultant image should be. Use `null` or `undefined` to auto-scale the height to match the width.
241 * @param {Object} [options]
242 * @param {number} [options.width] - An alternative means of specifying `width`. If both are present this takes priority.
243 * @param {number} [options.height] - An alternative means of specifying `height`. If both are present this takes priority.
244 * @param {String} [options.fit='cover'] - How the image should be resized/cropped to fit the target dimension(s), one of `cover`, `contain`, `fill`, `inside` or `outside`.
245 * @param {String} [options.position='centre'] - A position, gravity or strategy to use when `fit` is `cover` or `contain`.
246 * @param {String|Object} [options.background={r: 0, g: 0, b: 0, alpha: 1}] - background colour when `fit` is `contain`, parsed by the [color](https://www.npmjs.org/package/color) module, defaults to black without transparency.
247 * @param {String} [options.kernel='lanczos3'] - The kernel to use for image reduction and the inferred interpolator to use for upsampling. Use the `fastShrinkOnLoad` option to control kernel vs shrink-on-load.
248 * @param {Boolean} [options.withoutEnlargement=false] - Do not scale up if the width *or* height are already less than the target dimensions, equivalent to GraphicsMagick's `>` geometry option. This may result in output dimensions smaller than the target dimensions.
249 * @param {Boolean} [options.withoutReduction=false] - Do not scale down if the width *or* height are already greater than the target dimensions, equivalent to GraphicsMagick's `<` geometry option. This may still result in a crop to reach the target dimensions.
250 * @param {Boolean} [options.fastShrinkOnLoad=true] - Take greater advantage of the JPEG and WebP shrink-on-load feature, which can lead to a slight moiré pattern or round-down of an auto-scaled dimension.
251 * @returns {Sharp}
252 * @throws {Error} Invalid parameters
253 */
254function resize (widthOrOptions, height, options) {
255 if (isResizeExpected(this.options)) {
256 this.options.debuglog('ignoring previous resize options');
257 }
258 if (this.options.widthPost !== -1) {
259 this.options.debuglog('operation order will be: extract, resize, extract');
260 }
261 if (is.defined(widthOrOptions)) {
262 if (is.object(widthOrOptions) && !is.defined(options)) {
263 options = widthOrOptions;
264 } else if (is.integer(widthOrOptions) && widthOrOptions > 0) {
265 this.options.width = widthOrOptions;
266 } else {
267 throw is.invalidParameterError('width', 'positive integer', widthOrOptions);
268 }
269 } else {
270 this.options.width = -1;
271 }
272 if (is.defined(height)) {
273 if (is.integer(height) && height > 0) {
274 this.options.height = height;
275 } else {
276 throw is.invalidParameterError('height', 'positive integer', height);
277 }
278 } else {
279 this.options.height = -1;
280 }
281 if (is.object(options)) {
282 // Width
283 if (is.defined(options.width)) {
284 if (is.integer(options.width) && options.width > 0) {
285 this.options.width = options.width;
286 } else {
287 throw is.invalidParameterError('width', 'positive integer', options.width);
288 }
289 }
290 // Height
291 if (is.defined(options.height)) {
292 if (is.integer(options.height) && options.height > 0) {
293 this.options.height = options.height;
294 } else {
295 throw is.invalidParameterError('height', 'positive integer', options.height);
296 }
297 }
298 // Fit
299 if (is.defined(options.fit)) {
300 const canvas = mapFitToCanvas[options.fit];
301 if (is.string(canvas)) {
302 this.options.canvas = canvas;
303 } else {
304 throw is.invalidParameterError('fit', 'valid fit', options.fit);
305 }
306 }
307 // Position
308 if (is.defined(options.position)) {
309 const pos = is.integer(options.position)
310 ? options.position
311 : strategy[options.position] || position[options.position] || gravity[options.position];
312 if (is.integer(pos) && (is.inRange(pos, 0, 8) || is.inRange(pos, 16, 17))) {
313 this.options.position = pos;
314 } else {
315 throw is.invalidParameterError('position', 'valid position/gravity/strategy', options.position);
316 }
317 }
318 // Background
319 this._setBackgroundColourOption('resizeBackground', options.background);
320 // Kernel
321 if (is.defined(options.kernel)) {
322 if (is.string(kernel[options.kernel])) {
323 this.options.kernel = kernel[options.kernel];
324 } else {
325 throw is.invalidParameterError('kernel', 'valid kernel name', options.kernel);
326 }
327 }
328 // Without enlargement
329 if (is.defined(options.withoutEnlargement)) {
330 this._setBooleanOption('withoutEnlargement', options.withoutEnlargement);
331 }
332 // Without reduction
333 if (is.defined(options.withoutReduction)) {
334 this._setBooleanOption('withoutReduction', options.withoutReduction);
335 }
336 // Shrink on load
337 if (is.defined(options.fastShrinkOnLoad)) {
338 this._setBooleanOption('fastShrinkOnLoad', options.fastShrinkOnLoad);
339 }
340 }
341 if (isRotationExpected(this.options) && isResizeExpected(this.options)) {
342 this.options.rotateBeforePreExtract = true;
343 }
344 return this;
345}
346
347/**
348 * Extend / pad / extrude one or more edges of the image with either
349 * the provided background colour or pixels derived from the image.
350 * This operation will always occur after resizing and extraction, if any.
351 *
352 * @example
353 * // Resize to 140 pixels wide, then add 10 transparent pixels
354 * // to the top, left and right edges and 20 to the bottom edge
355 * sharp(input)
356 * .resize(140)
357 * .extend({
358 * top: 10,
359 * bottom: 20,
360 * left: 10,
361 * right: 10,
362 * background: { r: 0, g: 0, b: 0, alpha: 0 }
363 * })
364 * ...
365 *
366* @example
367 * // Add a row of 10 red pixels to the bottom
368 * sharp(input)
369 * .extend({
370 * bottom: 10,
371 * background: 'red'
372 * })
373 * ...
374 *
375 * @example
376 * // Extrude image by 8 pixels to the right, mirroring existing right hand edge
377 * sharp(input)
378 * .extend({
379 * right: 8,
380 * background: 'mirror'
381 * })
382 * ...
383 *
384 * @param {(number|Object)} extend - single pixel count to add to all edges or an Object with per-edge counts
385 * @param {number} [extend.top=0]
386 * @param {number} [extend.left=0]
387 * @param {number} [extend.bottom=0]
388 * @param {number} [extend.right=0]
389 * @param {String} [extend.extendWith='background'] - populate new pixels using this method, one of: background, copy, repeat, mirror.
390 * @param {String|Object} [extend.background={r: 0, g: 0, b: 0, alpha: 1}] - background colour, parsed by the [color](https://www.npmjs.org/package/color) module, defaults to black without transparency.
391 * @returns {Sharp}
392 * @throws {Error} Invalid parameters
393*/
394function extend (extend) {
395 if (is.integer(extend) && extend > 0) {
396 this.options.extendTop = extend;
397 this.options.extendBottom = extend;
398 this.options.extendLeft = extend;
399 this.options.extendRight = extend;
400 } else if (is.object(extend)) {
401 if (is.defined(extend.top)) {
402 if (is.integer(extend.top) && extend.top >= 0) {
403 this.options.extendTop = extend.top;
404 } else {
405 throw is.invalidParameterError('top', 'positive integer', extend.top);
406 }
407 }
408 if (is.defined(extend.bottom)) {
409 if (is.integer(extend.bottom) && extend.bottom >= 0) {
410 this.options.extendBottom = extend.bottom;
411 } else {
412 throw is.invalidParameterError('bottom', 'positive integer', extend.bottom);
413 }
414 }
415 if (is.defined(extend.left)) {
416 if (is.integer(extend.left) && extend.left >= 0) {
417 this.options.extendLeft = extend.left;
418 } else {
419 throw is.invalidParameterError('left', 'positive integer', extend.left);
420 }
421 }
422 if (is.defined(extend.right)) {
423 if (is.integer(extend.right) && extend.right >= 0) {
424 this.options.extendRight = extend.right;
425 } else {
426 throw is.invalidParameterError('right', 'positive integer', extend.right);
427 }
428 }
429 this._setBackgroundColourOption('extendBackground', extend.background);
430 if (is.defined(extend.extendWith)) {
431 if (is.string(extendWith[extend.extendWith])) {
432 this.options.extendWith = extendWith[extend.extendWith];
433 } else {
434 throw is.invalidParameterError('extendWith', 'one of: background, copy, repeat, mirror', extend.extendWith);
435 }
436 }
437 } else {
438 throw is.invalidParameterError('extend', 'integer or object', extend);
439 }
440 return this;
441}
442
443/**
444 * Extract/crop a region of the image.
445 *
446 * - Use `extract` before `resize` for pre-resize extraction.
447 * - Use `extract` after `resize` for post-resize extraction.
448 * - Use `extract` twice and `resize` once for extract-then-resize-then-extract in a fixed operation order.
449 *
450 * @example
451 * sharp(input)
452 * .extract({ left: left, top: top, width: width, height: height })
453 * .toFile(output, function(err) {
454 * // Extract a region of the input image, saving in the same format.
455 * });
456 * @example
457 * sharp(input)
458 * .extract({ left: leftOffsetPre, top: topOffsetPre, width: widthPre, height: heightPre })
459 * .resize(width, height)
460 * .extract({ left: leftOffsetPost, top: topOffsetPost, width: widthPost, height: heightPost })
461 * .toFile(output, function(err) {
462 * // Extract a region, resize, then extract from the resized image
463 * });
464 *
465 * @param {Object} options - describes the region to extract using integral pixel values
466 * @param {number} options.left - zero-indexed offset from left edge
467 * @param {number} options.top - zero-indexed offset from top edge
468 * @param {number} options.width - width of region to extract
469 * @param {number} options.height - height of region to extract
470 * @returns {Sharp}
471 * @throws {Error} Invalid parameters
472 */
473function extract (options) {
474 const suffix = isResizeExpected(this.options) || this.options.widthPre !== -1 ? 'Post' : 'Pre';
475 if (this.options[`width${suffix}`] !== -1) {
476 this.options.debuglog('ignoring previous extract options');
477 }
478 ['left', 'top', 'width', 'height'].forEach(function (name) {
479 const value = options[name];
480 if (is.integer(value) && value >= 0) {
481 this.options[name + (name === 'left' || name === 'top' ? 'Offset' : '') + suffix] = value;
482 } else {
483 throw is.invalidParameterError(name, 'integer', value);
484 }
485 }, this);
486 // Ensure existing rotation occurs before pre-resize extraction
487 if (isRotationExpected(this.options) && !isResizeExpected(this.options)) {
488 if (this.options.widthPre === -1 || this.options.widthPost === -1) {
489 this.options.rotateBeforePreExtract = true;
490 }
491 }
492 return this;
493}
494
495/**
496 * Trim pixels from all edges that contain values similar to the given background colour, which defaults to that of the top-left pixel.
497 *
498 * Images with an alpha channel will use the combined bounding box of alpha and non-alpha channels.
499 *
500 * If the result of this operation would trim an image to nothing then no change is made.
501 *
502 * The `info` response Object will contain `trimOffsetLeft` and `trimOffsetTop` properties.
503 *
504 * @example
505 * // Trim pixels with a colour similar to that of the top-left pixel.
506 * await sharp(input)
507 * .trim()
508 * .toFile(output);
509 *
510 * @example
511 * // Trim pixels with the exact same colour as that of the top-left pixel.
512 * await sharp(input)
513 * .trim({
514 * threshold: 0
515 * })
516 * .toFile(output);
517 *
518 * @example
519 * // Assume input is line art and trim only pixels with a similar colour to red.
520 * const output = await sharp(input)
521 * .trim({
522 * background: "#FF0000",
523 * lineArt: true
524 * })
525 * .toBuffer();
526 *
527 * @example
528 * // Trim all "yellow-ish" pixels, being more lenient with the higher threshold.
529 * const output = await sharp(input)
530 * .trim({
531 * background: "yellow",
532 * threshold: 42,
533 * })
534 * .toBuffer();
535 *
536 * @param {Object} [options]
537 * @param {string|Object} [options.background='top-left pixel'] - Background colour, parsed by the [color](https://www.npmjs.org/package/color) module, defaults to that of the top-left pixel.
538 * @param {number} [options.threshold=10] - Allowed difference from the above colour, a positive number.
539 * @param {boolean} [options.lineArt=false] - Does the input more closely resemble line art (e.g. vector) rather than being photographic?
540 * @returns {Sharp}
541 * @throws {Error} Invalid parameters
542 */
543function trim (options) {
544 this.options.trimThreshold = 10;
545 if (is.defined(options)) {
546 if (is.object(options)) {
547 if (is.defined(options.background)) {
548 this._setBackgroundColourOption('trimBackground', options.background);
549 }
550 if (is.defined(options.threshold)) {
551 if (is.number(options.threshold) && options.threshold >= 0) {
552 this.options.trimThreshold = options.threshold;
553 } else {
554 throw is.invalidParameterError('threshold', 'positive number', options.threshold);
555 }
556 }
557 if (is.defined(options.lineArt)) {
558 this._setBooleanOption('trimLineArt', options.lineArt);
559 }
560 } else {
561 throw is.invalidParameterError('trim', 'object', options);
562 }
563 }
564 if (isRotationExpected(this.options)) {
565 this.options.rotateBeforePreExtract = true;
566 }
567 return this;
568}
569
570/**
571 * Decorate the Sharp prototype with resize-related functions.
572 * @private
573 */
574module.exports = function (Sharp) {
575 Object.assign(Sharp.prototype, {
576 resize,
577 extend,
578 extract,
579 trim
580 });
581 // Class attributes
582 Sharp.gravity = gravity;
583 Sharp.strategy = strategy;
584 Sharp.kernel = kernel;
585 Sharp.fit = fit;
586 Sharp.position = position;
587};