Asset Transformation focal point and withoutEnlargement => sharp bad extract area error

[leolurch]

Describe the Bug

I just found out, that you can't use withoutEnlargement together with a focal point, when passing a width or height that is greater, than the width or height of the original image.

I tested this with multiple images.

The removal of the focal point resolved the issue.

To Reproduce

Directus Version: 10.10.7

Example:

Image Dimensions: 1024x732
Focal Point set to 512, 366 (when I remove the focal point it starts to work again)

Working URL:

http://192.168.0.80:8055/assets/073b87e9-6391-47e9-b671-709138414abd?format=auto&quality=85&fit=cover&width=1024&height=732&withoutEnlargement=true

URL's that don't work:

http://192.168.0.80:8055/assets/073b87e9-6391-47e9-b671-709138414abd?format=auto&quality=85&fit=cover&width=1024&height=733&withoutEnlargement=true

http://192.168.0.80:8055/assets/073b87e9-6391-47e9-b671-709138414abd?format=auto&quality=85&fit=cover&width=1025&height=733&withoutEnlargement=true

Error in Browser

{"errors":[{"message":"An unexpected error occurred.","extensions":{"code":"INTERNAL_SERVER_ERROR"}}]}

Error in Console

cms-directus-1  | [05:24:59.945] ERROR: extract_area: bad extract area
cms-directus-1  |     err: {
cms-directus-1  |       "type": "Error",
cms-directus-1  |       "message": "extract_area: bad extract area",
cms-directus-1  |       "stack":
cms-directus-1  |           Error: extract_area: bad extract area
cms-directus-1  |               at Sharp._read (/directus/node_modules/.pnpm/sharp@0.33.2/node_modules/sharp/lib/output.js:1417:19)
cms-directus-1  |               at Readable.read (node:internal/streams/readable:539:12)
cms-directus-1  |               at createAsyncIterator (node:internal/streams/readable:1163:54)
cms-directus-1  |               at createAsyncIterator.next (<anonymous>)
cms-directus-1  |               at getDataReadable (/directus/node_modules/.pnpm/@aws-sdk+lib-storage@3.525.1_@aws-sdk+client-s3@3.536.0/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:113:20)
cms-directus-1  |               at getDataReadable.next (<anonymous>)
cms-directus-1  |               at getChunkStream (/directus/node_modules/.pnpm/@aws-sdk+lib-storage@3.525.1_@aws-sdk+client-s3@3.536.0/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:88:20)
cms-directus-1  |               at getChunkStream.next (<anonymous>)
cms-directus-1  |               at _Upload.__doConcurrentUpload (/directus/node_modules/.pnpm/@aws-sdk+lib-storage@3.525.1_@aws-sdk+client-s3@3.536.0/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:269:22)
cms-directus-1  |               at _Upload.__doMultipartUpload (/directus/node_modules/.pnpm/@aws-sdk+lib-storage@3.525.1_@aws-sdk+client-s3@3.536.0/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js:363:34)
cms-directus-1  |     }
cms-directus-1  | [05:24:59] GET /assets/073b87e9-6391-47e9-b671-709138414abd?format=auto&quality=85&fit=cover&width=1025&height=732&withoutEnlargement=true 500 505ms

.env

PUBLIC_URL=http://192.168.0.80:8055
DIRECTUS_URL=http://192.168.0.80:8055

DIRECTUS_ADMIN_TOKEN=<VALID_VALUE>
KEY=<VALID_VALUE>
SECRET=<VALID_VALUE>

DB_CLIENT=pg
DB_CONNECTION_STRING=<VALID_VALUE>
NODE_TLS_REJECT_UNAUTHORIZED=0

CACHE_ENABLED=true
CACHE_TTL=999m
CACHE_AUTO_PURGE=true
CACHE_STORE=memory
CACHE_STATUS_HEADER=true
CACHE_VALUE_MAX_SIZE=2G

ADMIN_EMAIL=<VALID_VALUE>
ADMIN_PASSWORD=<VALID_VALUE>

CORS_ENABLED=true
CORS_ORIGIN=true

STORAGE_LOCATIONS="s3"
STORAGE_S3_DRIVER="s3"
STORAGE_S3_KEY=<VALID_VALUE>
STORAGE_S3_SECRET=<VALID_VALUE>
STORAGE_S3_ENDPOINT=<VALID_VALUE>
STORAGE_S3_BUCKET=<VALID_VALUE>
STORAGE_S3_REGION=<VALID_VALUE>
STORAGE_S3_ROOT=<VALID_VALUE>

Dockerfile

FROM directus/directus:10.10.7

USER root
WORKDIR /directus
COPY . .
RUN corepack enable \
  && corepack prepare pnpm@8.1.1 --activate \
  # Currently required, we'll probably address this in the base image in future release
  && chown node:node /directus

ENV HOME=/directus

USER node
RUN pnpm install directus-extension-api-viewer
RUN pnpm install directus-extension-sync
RUN pnpm install directus-extension-admin-panels

# Expose the port
EXPOSE 8055

docker-compose.yml

version: '3.8'

services:
  database:
    image: postgis/postgis:13-master
    # Required when running on platform other than amd64, like Apple M1/M2:
    platform: linux/amd64
    volumes:
      - ./data/database:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: 'doadmin'
      POSTGRES_PASSWORD: 'directus'
      POSTGRES_DB: 'directus_dev'
    ports:
      - 5432:5432

  # cache:
  #   image: redis:6

  directus:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8055:8055
    # volumes:
    # - ./uploads:/directus/uploads
    # If you want to load extensions from the host
    # - ./extensions:/directus/extensions
    depends_on:
      - database
      # - cache

    env_file:
      - ./.env

Directus Version

10.10.7

Hosting Strategy

Self-Hosted (Docker Image)

[DanielBiegler]

Ohhh, good catch. Problem here is that resizing is a fundamental step when cropping to a focal point and depending on the params you must enlarge the image temporarily so that you can crop it down afterwards. This specific problem is happening here:

directus/api/src/utils/transformations.ts

Lines 59 to 61 in 9a6e236

	withoutEnlargement: transformationParams.withoutEnlargement
	? Boolean(transformationParams.withoutEnlargement)
	: undefined,

Important: I just noticed that sharps behavior for withoutEnlargement when providing larger params without a focal point is to actually just return the max dimensions. Mh.