Add support for input array to join or animate #1580

lib/constructor.js

@@ -121,10 +121,25 @@ const debuglog = util.debuglog('sharp');
  *   }
  * }).toFile('text_rgba.png');
  *
- * @param {(Buffer|ArrayBuffer|Uint8Array|Uint8ClampedArray|Int8Array|Uint16Array|Int16Array|Uint32Array|Int32Array|Float32Array|Float64Array|string)} [input] - if present, can be
+ * @example
+ * // Join four input images as a 2x2 grid with a 4 pixel gutter
+ * const data = await sharp(
+ *  [image1, image2, image3, image4],
+ *  { join: { across: 2, shim: 4 } }
+ * ).toBuffer();
+ *
+ * @example
+ * // Generate a two-frame animated image from emoji
+ * const images = ['😀', '😛'].map(text => ({
+ *   text: { text, width: 64, height: 64, channels: 4, rgba: true }
+ * }));
+ * await sharp(images, { join: { animated: true } }).toFile('out.gif');
+ *
+ * @param {(Buffer|ArrayBuffer|Uint8Array|Uint8ClampedArray|Int8Array|Uint16Array|Int16Array|Uint32Array|Int32Array|Float32Array|Float64Array|string|Array)} [input] - if present, can be
  *  a Buffer / ArrayBuffer / Uint8Array / Uint8ClampedArray containing JPEG, PNG, WebP, AVIF, GIF, SVG or TIFF image data, or
  *  a TypedArray containing raw pixel image data, or
  *  a String containing the filesystem path to an JPEG, PNG, WebP, AVIF, GIF, SVG or TIFF image file.
+ *  An array of inputs can be provided, and these will be joined together.
  *  JPEG, PNG, WebP, AVIF, GIF, SVG, TIFF or raw pixel image data can be streamed into the object when not present.
  * @param {Object} [options] - if present, is an Object with optional attributes.
  * @param {string} [options.failOn='warning'] - When to abort processing of invalid pixel data, one of (in order of sensitivity, least to most): 'none', 'truncated', 'error', 'warning'. Higher levels imply lower levels. Invalid metadata will always abort.
@@ -169,6 +184,14 @@ const debuglog = util.debuglog('sharp');
  * @param {boolean} [options.text.rgba=false] - set this to true to enable RGBA output. This is useful for colour emoji rendering, or support for pango markup features like `<span foreground="red">Red!</span>`.
  * @param {number} [options.text.spacing=0] - text line height in points. Will use the font line height if none is specified.
  * @param {string} [options.text.wrap='word'] - word wrapping style when width is provided, one of: 'word', 'char', 'word-char' (prefer word, fallback to char) or 'none'.
+ * @param {Object} [options.join] - describes how an array of input images should be joined.
+ * @param {number} [options.join.across=1] - number of images to join horizontally.
+ * @param {boolean} [options.join.animated=false] - set this to `true` to join the images as an animated image.
+ * @param {number} [options.join.shim=0] - number of pixels to insert between joined images.
+ * @param {string|Object} [options.join.background] - parsed by the [color](https://www.npmjs.org/package/color) module to extract values for red, green, blue and alpha.
+ * @param {string} [options.join.halign='left'] - horizontal alignment style for images joined horizontally (`'left'`, `'centre'`, `'center'`, `'right'`).
+ * @param {string} [options.join.valign='top'] - vertical alignment style for images joined vertically (`'top'`, `'centre'`, `'center'`, `'bottom'`).
+ *
  * @returns {Sharp}
  * @throws {Error} Invalid parameters
  */

lib/index.d.ts

@@ -40,19 +40,7 @@ import { Duplex } from 'stream';
  */
 declare function sharp(options?: sharp.SharpOptions): sharp.Sharp;
 declare function sharp(
-    input?:
-        | Buffer
-        | ArrayBuffer
-        | Uint8Array
-        | Uint8ClampedArray
-        | Int8Array
-        | Uint16Array
-        | Int16Array
-        | Uint32Array
-        | Int32Array
-        | Float32Array
-        | Float64Array
-        | string,
+    input?: sharp.SharpInput | Array<sharp.SharpInput>,
     options?: sharp.SharpOptions,
 ): sharp.Sharp;
 
@@ -945,6 +933,19 @@ declare namespace sharp {
         //#endregion
     }
 
+    type SharpInput = Buffer
+        | ArrayBuffer
+        | Uint8Array
+        | Uint8ClampedArray
+        | Int8Array
+        | Uint16Array
+        | Int16Array
+        | Uint32Array
+        | Int32Array
+        | Float32Array
+        | Float64Array
+        | string;
+
     interface SharpOptions {
         /**
          * Auto-orient based on the EXIF `Orientation` tag, if present.
@@ -998,6 +999,8 @@ declare namespace sharp {
         create?: Create | undefined;
         /** Describes a new text image to be created. */
         text?: CreateText | undefined;
+        /** Describes how array of input images should be joined. */
+        join?: Join | undefined;
     }
 
     interface CacheOptions {
@@ -1078,6 +1081,21 @@ declare namespace sharp {
         wrap?: TextWrap;
     }
 
+    interface Join {
+        /** Number of images per row. */
+        across?: number | undefined;
+        /** Treat input as frames of an animated image. */
+        animated?: boolean | undefined;
+        /** Space between images, in pixels. */
+        shim?: number | undefined;
+        /** Background colour. */
+        background?: Colour | Color | undefined;
+        /** Horizontal alignment. */
+        halign?: HorizontalAlignment | undefined;
+        /** Vertical alignment. */
+        valign?: VerticalAlignment | undefined;
+    }
+
     interface ExifDir {
         [k: string]: string;
     }
@@ -1716,6 +1734,10 @@ declare namespace sharp {
 
     type TextWrap = 'word' | 'char' | 'word-char' | 'none';
 
+    type HorizontalAlignment = 'left' | 'centre' | 'center' | 'right';
+
+    type VerticalAlignment = 'top' | 'centre' | 'center' | 'bottom';
+
     type TileContainer = 'fs' | 'zip';
 
     type TileLayout = 'dz' | 'iiif' | 'iiif3' | 'zoomify' | 'google';

lib/input.js

@@ -14,9 +14,13 @@ const sharp = require('./sharp');
  */
 const align = {
   left: 'low',
+  top: 'low',
+  low: 'low',
   center: 'centre',
   centre: 'centre',
-  right: 'high'
+  right: 'high',
+  bottom: 'high',
+  high: 'high'
 };
 
 /**
@@ -72,6 +76,18 @@ function _createInputDescriptor (input, inputOptions, containerOptions) {
   } else if (!is.defined(input) && !is.defined(inputOptions) && is.object(containerOptions) && containerOptions.allowStream) {
     // Stream without options
     inputDescriptor.buffer = [];
+  } else if (Array.isArray(input)) {
+    if (input.length > 1) {
+      // Join images together
+      if (!this.options.joining) {
+        this.options.joining = true;
+        this.options.join = input.map(i => this._createInputDescriptor(i));
+      } else {
+        throw new Error('Recursive join is unsupported');
+      }
+    } else {
+      throw new Error('Expected at least two images to join');
+    }
   } else {
     throw new Error(`Unsupported input '${input}' of type ${typeof input}${
       is.defined(inputOptions) ? ` when also providing options of type ${typeof inputOptions}` : ''
@@ -369,6 +385,57 @@ function _createInputDescriptor (input, inputOptions, containerOptions) {
         throw new Error('Expected a valid string to create an image with text.');
       }
     }
+    // Join images together
+    if (is.defined(inputOptions.join)) {
+      if (is.defined(this.options.join)) {
+        if (is.defined(inputOptions.join.animated)) {
+          if (is.bool(inputOptions.join.animated)) {
+            inputDescriptor.joinAnimated = inputOptions.join.animated;
+          } else {
+            throw is.invalidParameterError('join.animated', 'boolean', inputOptions.join.animated);
+          }
+        }
+        if (is.defined(inputOptions.join.across)) {
+          if (is.integer(inputOptions.join.across) && is.inRange(inputOptions.join.across, 1, 1000000)) {
+            inputDescriptor.joinAcross = inputOptions.join.across;
+          } else {
+            throw is.invalidParameterError('join.across', 'integer between 1 and 100000', inputOptions.join.across);
+          }
+        }
+        if (is.defined(inputOptions.join.shim)) {
+          if (is.integer(inputOptions.join.shim) && is.inRange(inputOptions.join.shim, 0, 1000000)) {
+            inputDescriptor.joinShim = inputOptions.join.shim;
+          } else {
+            throw is.invalidParameterError('join.shim', 'integer between 0 and 100000', inputOptions.join.shim);
+          }
+        }
+        if (is.defined(inputOptions.join.background)) {
+          const background = color(inputOptions.join.background);
+          inputDescriptor.joinBackground = [
+            background.red(),
+            background.green(),
+            background.blue(),
+            Math.round(background.alpha() * 255)
+          ];
+        }
+        if (is.defined(inputOptions.join.halign)) {
+          if (is.string(inputOptions.join.halign) && is.string(this.constructor.align[inputOptions.join.halign])) {
+            inputDescriptor.joinHalign = this.constructor.align[inputOptions.join.halign];
+          } else {
+            throw is.invalidParameterError('join.halign', 'valid alignment', inputOptions.join.halign);
+          }
+        }
+        if (is.defined(inputOptions.join.valign)) {
+          if (is.string(inputOptions.join.valign) && is.string(this.constructor.align[inputOptions.join.valign])) {
+            inputDescriptor.joinValign = this.constructor.align[inputOptions.join.valign];
+          } else {
+            throw is.invalidParameterError('join.valign', 'valid alignment', inputOptions.join.valign);
+          }
+        }
+      } else {
+        throw new Error('Expected input to be an array of images to join');
+      }
+    }
   } else if (is.defined(inputOptions)) {
     throw new Error('Invalid input options ' + inputOptions);
   }