fix: resizing animated images (#6623)

Fixes resizing of animated images

V2 PR [here](#6621)

Author: PatrikKozak

packages/payload/src/uploads/cropImage.ts

@@ -1,3 +1,5 @@
+import type { SharpOptions } from 'sharp'
+
 export const percentToPixel = (value, dimension) => {
   return Math.floor((parseFloat(value) / 100) * dimension)
 }
@@ -6,14 +8,20 @@ export async function cropImage({ cropData, dimensions, file, sharp }) {
   try {
     const { height, width, x, y } = cropData
 
+    const fileIsAnimated = ['image/avif', 'image/gif', 'image/webp'].includes(file.mimetype)
+
+    const sharpOptions: SharpOptions = {}
+
+    if (fileIsAnimated) sharpOptions.animated = true
+
     const formattedCropData = {
       height: percentToPixel(height, dimensions.height),
       left: percentToPixel(x, dimensions.width),
       top: percentToPixel(y, dimensions.height),
       width: percentToPixel(width, dimensions.width),
     }
 
-    const cropped = sharp(file.tempFilePath || file.data).extract(formattedCropData)
+    const cropped = sharp(file.tempFilePath || file.data, sharpOptions).extract(formattedCropData)
 
     return await cropped.toBuffer({
       resolveWithObject: true,

packages/payload/src/uploads/generateFileData.ts

@@ -114,7 +114,7 @@ export const generateFileData = async <T>({
   let newData = data
   const filesToSave: FileToSave[] = []
   const fileData: Partial<FileData> = {}
-  const fileIsAnimated = file.mimetype === 'image/gif' || file.mimetype === 'image/webp'
+  const fileIsAnimated = ['image/avif', 'image/gif', 'image/webp'].includes(file.mimetype)
   const cropData =
     typeof uploadEdits === 'object' && 'crop' in uploadEdits ? uploadEdits.crop : undefined
 
@@ -128,7 +128,7 @@ export const generateFileData = async <T>({
     let mime: string
     const fileHasAdjustments =
       fileSupportsResize &&
-      Boolean(resizeOptions || formatOptions || trimOptions || file.tempFilePath)
+      Boolean(resizeOptions || formatOptions || imageSizes || trimOptions || file.tempFilePath)
 
     const sharpOptions: SharpOptions = {}
 
@@ -202,6 +202,7 @@ export const generateFileData = async <T>({
     let fileForResize = file
 
     if (cropData && sharp) {
+      const metadata = await sharpFile.metadata()
       const { data: croppedImage, info } = await cropImage({ cropData, dimensions, file, sharp })
 
       filesToSave.push({
@@ -215,7 +216,7 @@ export const generateFileData = async <T>({
         size: info.size,
       }
       fileData.width = info.width
-      fileData.height = info.height
+      fileData.height = fileIsAnimated ? info.height / metadata.pages : info.height
       fileData.filesize = info.size
 
       if (file.tempFilePath) {

packages/payload/src/uploads/imageResizer.ts

@@ -1,4 +1,4 @@
-import type { OutputInfo } from 'sharp'
+import type { OutputInfo, Sharp, SharpOptions } from 'sharp'
 
 import fileType from 'file-type'
 const { fromBuffer } = fileType
@@ -219,7 +219,7 @@ const sanitizeResizeConfig = (resizeConfig: ImageSize): ImageSize => {
  *
  * The image will be resized according to the provided
  * resize config. If no image sizes are requested, the resolved data will be empty.
- * For every image that dos not need to be resized, an result object with `null`
+ * For every image that does not need to be resized, a result object with `null`
  * parameters will be returned.
  *
  * @param resizeConfig - the resize config
@@ -256,7 +256,13 @@ export async function resizeAndTransformImageSizes({
     return defaultResult
   }
 
-  const sharpBase = sharp(file.tempFilePath || file.data).rotate() // pass rotate() to auto-rotate based on EXIF data. https://github.com/payloadcms/payload/pull/3081
+  // Determine if the file is animated
+  const fileIsAnimated = ['image/avif', 'image/gif', 'image/webp'].includes(file.mimetype)
+  const sharpOptions: SharpOptions = {}
+
+  if (fileIsAnimated) sharpOptions.animated = true
+
+  const sharpBase: Sharp | undefined = sharp(file.tempFilePath || file.data, sharpOptions).rotate() // pass rotate() to auto-rotate based on EXIF data. https://github.com/payloadcms/payload/pull/3081
 
   const results: ImageSizesResult[] = await Promise.all(
     imageSizes.map(async (imageResizeConfig): Promise<ImageSizesResult> => {
@@ -272,6 +278,8 @@ export async function resizeAndTransformImageSizes({
       const imageToResize = sharpBase.clone()
       let resized = imageToResize
 
+      const metadata = await sharpBase.metadata()
+
       if (incomingFocalPoint && applyPayloadAdjustments(imageResizeConfig, dimensions)) {
         const { height: resizeHeight, width: resizeWidth } = imageResizeConfig
         const resizeAspectRatio = resizeWidth / resizeHeight
@@ -293,14 +301,18 @@ export async function resizeAndTransformImageSizes({
         const safeOffsetX = Math.min(Math.max(0, leftFocalEdge), maxOffsetX)
 
         const safeResizeHeight = resizeHeight ?? scaledImageInfo.height
-        const maxOffsetY = scaledImageInfo.height - safeResizeHeight
+
+        const maxOffsetY = fileIsAnimated
+          ? resizeHeight - safeResizeHeight
+          : scaledImageInfo.height - safeResizeHeight
+
         const topFocalEdge = Math.round(
           scaledImageInfo.height * (incomingFocalPoint.y / 100) - safeResizeHeight / 2,
         )
         const safeOffsetY = Math.min(Math.max(0, topFocalEdge), maxOffsetY)
 
         // extract the focal area from the scaled image
-        resized = scaledImage.extract({
+        resized = (fileIsAnimated ? imageToResize : scaledImage).extract({
           height: safeResizeHeight,
           left: safeOffsetX,
           top: safeOffsetY,
@@ -354,7 +366,7 @@ export async function resizeAndTransformImageSizes({
         name: imageResizeConfig.name,
         filename: imageNameWithDimensions,
         filesize: size,
-        height,
+        height: fileIsAnimated ? height / metadata.pages : height,
         mimeType: mimeInfo?.mime || mimeType,
         sizesToSave: [{ buffer: bufferData, path: imagePath }],
         width,