Ensure animated GIF to WebP conversion retains loop #3394

Slightly refactor the way background colours are set

README.md

@@ -1,6 +1,6 @@
 # sharp
 
-<img src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/sharp-logo.svg" width="160" height="160" alt="sharp logo" align="right">
+<img src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/public/sharp-logo.svg" width="160" height="160" alt="sharp logo" align="right">
 
 The typical use case for this high speed Node-API module
 is to convert large images in common formats to

docs/firebase.json

@@ -11,99 +11,6 @@
           { "key": "X-Frame-Options", "value": "SAMEORIGIN" }
         ]
       }
-    ],
-    "redirects": [
-      {
-        "source": "**/install/**",
-        "destination": "/install",
-        "type": 301
-      },
-      {
-        "source": "/page/install",
-        "destination": "/install",
-        "type": 301
-      },
-      {
-        "source": "**/api-constructor/**",
-        "destination": "/api-constructor",
-        "type": 301
-      },
-      {
-        "source": "**/api-input/**",
-        "destination": "/api-input",
-        "type": 301
-      },
-      {
-        "source": "**/api-output/**",
-        "destination": "/api-output",
-        "type": 301
-      },
-      {
-        "source": "**/api-resize/**",
-        "destination": "/api-resize",
-        "type": 301
-      },
-      {
-        "source": "**/api-compsite/**",
-        "destination": "/api-compsite",
-        "type": 301
-      },
-      {
-        "source": "**/api-operation/**",
-        "destination": "/api-operation",
-        "type": 301
-      },
-      {
-        "source": "**/api-colour/**",
-        "destination": "/api-colour",
-        "type": 301
-      },
-      {
-        "source": "**/api-channel/**",
-        "destination": "/api-channel",
-        "type": 301
-      },
-      {
-        "source": "**/api-utility/**",
-        "destination": "/api-utility",
-        "type": 301
-      },
-      {
-        "source": "/page/api",
-        "destination": "/api-constructor",
-        "type": 301
-      },
-      {
-        "source": "**/performance/**",
-        "destination": "/performance",
-        "type": 301
-      },
-      {
-        "source": "/page/performance",
-        "destination": "/performance",
-        "type": 301
-      },
-      {
-        "source": "**/changelog/**",
-        "destination": "/changelog",
-        "type": 301
-      },
-      {
-        "source": "/page/changelog",
-        "destination": "/changelog",
-        "type": 301
-      },
-      {
-        "source": "/en/**",
-        "destination": "/",
-        "type": 301
-      }
-    ],
-    "rewrites": [
-      {
-        "source": "**",
-        "destination": "/index.html"
-      }
     ]
   }
 }

docs/src/content/docs/api-resize.md

@@ -17,7 +17,7 @@ When both a `width` and `height` are provided, the possible methods by which the
 
 Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
 
-<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">
+<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/public/api-resize-fit.svg">
 
 When using a **fit** of `cover` or `contain`, the default **position** is `centre`. Other options are:
 - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.

docs/src/content/docs/changelog.md

@@ -6,6 +6,20 @@ title: Changelog
 
 Requires libvips v8.16.1
 
+### v0.34.2 - TBD
+
+* Ensure animated GIF to WebP conversion retains loop (regression in 0.34.0).
+  [#3394](https://github.com/lovell/sharp/issues/3394)
+
+* Ensure `pdfBackground` constructor property is used.
+  [#4207](https://github.com/lovell/sharp/pull/4207)
+
+### v0.34.1 - 7th April 2025
+
+* TypeScript: Ensure new `autoOrient` property is optional.
+  [#4362](https://github.com/lovell/sharp/pull/4362)
+  [@styfle](https://github.com/styfle)
+
 ### v0.34.0 - 4th April 2025
 
 * Breaking: Support array of input images to be joined or animated.

docs/src/content/docs/index.md

@@ -2,7 +2,7 @@
 title: "High performance Node.js image processing"
 ---
 
-<img src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/image/sharp-logo.svg" width="160" height="160" alt="sharp logo" align="right">
+<img src="https://cdn.jsdelivr.net/gh/lovell/sharp@main/docs/public/sharp-logo.svg" width="160" height="160" alt="sharp logo" align="right">
 
 The typical use case for this high speed Node-API module
 is to convert large images in common formats to

lib/colour.js

@@ -134,6 +134,26 @@ function toColorspace (colorspace) {
   return this.toColourspace(colorspace);
 }
 
+/**
+ * Create a RGBA colour array from a given value.
+ * @private
+ * @param {string|Object} value
+ * @throws {Error} Invalid value
+ */
+function _getBackgroundColourOption (value) {
+  if (is.object(value) || is.string(value)) {
+    const colour = color(value);
+    return [
+      colour.red(),
+      colour.green(),
+      colour.blue(),
+      Math.round(colour.alpha() * 255)
+    ];
+  } else {
+    throw is.invalidParameterError('background', 'object or string', value);
+  }
+}
+
 /**
  * Update a colour attribute of the this.options Object.
  * @private
@@ -143,17 +163,7 @@ function toColorspace (colorspace) {
  */
 function _setBackgroundColourOption (key, value) {
   if (is.defined(value)) {
-    if (is.object(value) || is.string(value)) {
+    this.options[key] = _getBackgroundColourOption(value);
-      const colour = color(value);
-      this.options[key] = [
-        colour.red(),
-        colour.green(),
-        colour.blue(),
-        Math.round(colour.alpha() * 255)
-      ];
-    } else {
-      throw is.invalidParameterError('background', 'object or string', value);
-    }
   }
 }
 
@@ -173,6 +183,7 @@ module.exports = function (Sharp) {
     toColourspace,
     toColorspace,
     // Private
+    _getBackgroundColourOption,
     _setBackgroundColourOption
   });
   // Class attributes

lib/constructor.js

@@ -298,7 +298,7 @@ const Sharp = function (input, options) {
     withExif: {},
     withExifMerge: true,
     resolveWithObject: false,
-    loop: 1,
+    loop: -1,
     delay: [],
     // output format
     jpegQuality: 80,

lib/index.d.ts

@@ -971,7 +971,7 @@ declare namespace sharp {
          *
          * Using this option will remove the EXIF `Orientation` tag, if any.
          */
-        autoOrient?: boolean;
+        autoOrient?: boolean | undefined;
         /**
          *  When to abort processing of invalid pixel data, one of (in order of sensitivity):
          *  'none' (least), 'truncated', 'error' or 'warning' (most), highers level imply lower levels, invalid metadata will always abort. (optional, default 'warning')
@@ -1699,6 +1699,10 @@ declare namespace sharp {
         /** When using the attention crop strategy, the focal point of the cropped region */
         attentionX?: number | undefined;
         attentionY?: number | undefined;
+        /** Number of pages/frames contained within the image, with support for TIFF, HEIF, PDF, animated GIF and animated WebP */
+        pages?: number | undefined;
+        /** Number of pixels high each page in a multi-page image will be. */
+        pageHeight?: number | undefined;
     }
 
     interface AvailableFormatInfo {

lib/input.js

@@ -3,7 +3,6 @@
 
 'use strict';
 
-const color = require('color');
 const is = require('./is');
 const sharp = require('./sharp');
 
@@ -249,7 +248,7 @@ function _createInputDescriptor (input, inputOptions, containerOptions) {
     }
     // PDF background colour
     if (is.defined(inputOptions.pdfBackground)) {
-      this._setBackgroundColourOption('pdfBackground', inputOptions.pdfBackground);
+      inputDescriptor.pdfBackground = this._getBackgroundColourOption(inputOptions.pdfBackground);
     }
     // Create new image
     if (is.defined(inputOptions.create)) {
@@ -288,13 +287,7 @@ function _createInputDescriptor (input, inputOptions, containerOptions) {
           if (!is.inRange(inputOptions.create.channels, 3, 4)) {
             throw is.invalidParameterError('create.channels', 'number between 3 and 4', inputOptions.create.channels);
           }
-          const background = color(inputOptions.create.background);
+          inputDescriptor.createBackground = this._getBackgroundColourOption(inputOptions.create.background);
-          inputDescriptor.createBackground = [
-            background.red(),
-            background.green(),
-            background.blue(),
-            Math.round(background.alpha() * 255)
-          ];
         } else {
           throw new Error('Expected valid noise or background to create a new input image');
         }
@@ -410,13 +403,7 @@ function _createInputDescriptor (input, inputOptions, containerOptions) {
           }
         }
         if (is.defined(inputOptions.join.background)) {
-          const background = color(inputOptions.join.background);
+          inputDescriptor.joinBackground = this._getBackgroundColourOption(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])) {

lib/operation.js

@@ -3,7 +3,6 @@
 
 'use strict';
 
-const color = require('color');
 const is = require('./is');
 
 /**
@@ -67,13 +66,7 @@ function rotate (angle, options) {
   } else if (is.number(angle)) {
     this.options.rotationAngle = angle;
     if (is.object(options) && options.background) {
-      const backgroundColour = color(options.background);
+      this._setBackgroundColourOption('rotationBackground', options.background);
-      this.options.rotationBackground = [
-        backgroundColour.red(),
-        backgroundColour.green(),
-        backgroundColour.blue(),
-        Math.round(backgroundColour.alpha() * 255)
-      ];
     }
   } else {
     throw is.invalidParameterError('angle', 'numeric', angle);

lib/resize.js

@@ -129,7 +129,7 @@ function isResizeExpected (options) {
  *
  * Some of these values are based on the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
  *
- * <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">
+ * <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/public/api-resize-fit.svg">
  *
  * When using a **fit** of `cover` or `contain`, the default **position** is `centre`. Other options are:
  * - `sharp.position`: `top`, `right top`, `right`, `right bottom`, `bottom`, `left bottom`, `left`, `left top`.

npm/darwin-arm64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-darwin-arm64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with macOS 64-bit ARM",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/darwin-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-darwin-x64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with macOS x64",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linux-arm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linux-arm",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (glibc) ARM (32-bit)",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linux-arm64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linux-arm64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (glibc) 64-bit ARM",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linux-ppc64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linux-ppc64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (glibc) ppc64",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linux-s390x/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linux-s390x",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (glibc) s390x",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linux-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linux-x64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (glibc) x64",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linuxmusl-arm64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linuxmusl-arm64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (musl) 64-bit ARM",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/linuxmusl-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-linuxmusl-x64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Linux (musl) x64",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "private": "true",
   "workspaces": [
     "darwin-arm64",

npm/wasm32/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-wasm32",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with wasm32",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/win32-ia32/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-win32-ia32",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Windows x86 (32-bit)",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

npm/win32-x64/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@img/sharp-win32-x64",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Prebuilt sharp for use with Windows x64",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sharp",
   "description": "High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, GIF, AVIF and TIFF images",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "author": "Lovell Fuller <npm@lovell.info>",
   "homepage": "https://sharp.pixelplumbing.com",
   "contributors": [
@@ -142,8 +142,8 @@
     "semver": "^7.7.1"
   },
   "optionalDependencies": {
-    "@img/sharp-darwin-arm64": "0.34.0",
+    "@img/sharp-darwin-arm64": "0.34.1",
-    "@img/sharp-darwin-x64": "0.34.0",
+    "@img/sharp-darwin-x64": "0.34.1",
     "@img/sharp-libvips-darwin-arm64": "1.1.0",
     "@img/sharp-libvips-darwin-x64": "1.1.0",
     "@img/sharp-libvips-linux-arm": "1.1.0",
@@ -153,15 +153,15 @@
     "@img/sharp-libvips-linux-x64": "1.1.0",
     "@img/sharp-libvips-linuxmusl-arm64": "1.1.0",
     "@img/sharp-libvips-linuxmusl-x64": "1.1.0",
-    "@img/sharp-linux-arm": "0.34.0",
+    "@img/sharp-linux-arm": "0.34.1",
-    "@img/sharp-linux-arm64": "0.34.0",
+    "@img/sharp-linux-arm64": "0.34.1",
-    "@img/sharp-linux-s390x": "0.34.0",
+    "@img/sharp-linux-s390x": "0.34.1",
-    "@img/sharp-linux-x64": "0.34.0",
+    "@img/sharp-linux-x64": "0.34.1",
-    "@img/sharp-linuxmusl-arm64": "0.34.0",
+    "@img/sharp-linuxmusl-arm64": "0.34.1",
-    "@img/sharp-linuxmusl-x64": "0.34.0",
+    "@img/sharp-linuxmusl-x64": "0.34.1",
-    "@img/sharp-wasm32": "0.34.0",
+    "@img/sharp-wasm32": "0.34.1",
-    "@img/sharp-win32-ia32": "0.34.0",
+    "@img/sharp-win32-ia32": "0.34.1",
-    "@img/sharp-win32-x64": "0.34.0"
+    "@img/sharp-win32-x64": "0.34.1"
   },
   "devDependencies": {
     "@emnapi/runtime": "^1.4.0",

src/binding.gyp

@@ -19,7 +19,10 @@
         'type': 'shared_library',
         'defines': [
           '_VIPS_PUBLIC=__declspec(dllexport)',
-          '_ALLOW_KEYWORD_MACROS'
+          '_ALLOW_KEYWORD_MACROS',
+          'G_DISABLE_ASSERT',
+          'G_DISABLE_CAST_CHECKS',
+          'G_DISABLE_CHECKS'
         ],
         'sources': [
           '<(sharp_libvips_cplusplus_dir)/VConnection.cpp',

src/common.cc

@@ -651,22 +651,21 @@ namespace sharp {
   */
   VImage SetAnimationProperties(VImage image, int nPages, int pageHeight, std::vector<int> delay, int loop) {
     bool hasDelay = !delay.empty();
-
-    // Avoid a copy if none of the animation properties are needed.
-    if (nPages == 1 && !hasDelay && loop == -1) return image;
-
-    if (delay.size() == 1) {
-      // We have just one delay, repeat that value for all frames.
-      delay.insert(delay.end(), nPages - 1, delay[0]);
-    }
-
-    // Attaching metadata, need to copy the image.
     VImage copy = image.copy();
 
     // Only set page-height if we have more than one page, or this could
     // accidentally turn into an animated image later.
     if (nPages > 1) copy.set(VIPS_META_PAGE_HEIGHT, pageHeight);
-    if (hasDelay) copy.set("delay", delay);
+    if (hasDelay) {
+      if (delay.size() == 1) {
+        // We have just one delay, repeat that value for all frames.
+        delay.insert(delay.end(), nPages - 1, delay[0]);
+      }
+      copy.set("delay", delay);
+    }
+    if (nPages == 1 && !hasDelay && loop == -1) {
+      loop = 1;
+    }
     if (loop != -1) copy.set("loop", loop);
 
     return copy;

src/pipeline.h

@@ -384,7 +384,7 @@ struct PipelineBaton {
     ensureAlpha(-1.0),
     colourspacePipeline(VIPS_INTERPRETATION_LAST),
     colourspace(VIPS_INTERPRETATION_LAST),
-    loop(1),
+    loop(-1),
     tileSize(256),
     tileOverlap(0),
     tileContainer(VIPS_FOREIGN_DZ_CONTAINER_FS),

test/unit/gif.js

@@ -238,4 +238,15 @@ describe('GIF input', () => {
       assert.strictEqual(1, loop);
     }
   });
+
+  it('Animated GIF to animated WebP merges identical frames', async () => {
+    const webp = await sharp(fixtures.inputGifAnimated, { animated: true })
+      .webp()
+      .toBuffer();
+
+    const { delay, loop, pages } = await sharp(webp).metadata();
+    assert.deepStrictEqual([120, 120, 90, 120, 120, 90, 120, 90, 30], delay);
+    assert.strictEqual(0, loop);
+    assert.strictEqual(9, pages);
+  });
 });