search

ascorbic / get-pixels

🌈 🦕 Get the decoded pixel data from a JPG or PNG image
12 stars 3 forks source link

Jpg images causing memory leaks and failing #13

Closed samducker closed 10 months ago

samducker commented 10 months ago

So when I use png files this works well, but when I use jpg format like the below

https://a.storyblok.com/f/158991/6720x4480/51600d6bdf/led-birds-nest-production-pictures.jpg

I get this error


Error: maxMemoryUsageInMB limit exceeded by at least 34MB
    at Function.requestMemoryAllocation (/Users/sam/Documents/GitHub/legacy-project/node_modules/jpeg-js/lib/decoder.js:1071:13)
    at decode (/Users/sam/Documents/GitHub/legacy-project/node_modules/jpeg-js/lib/decoder.js:1121:15)
    at Object.jpg (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/@unpic/pixels/esm/src/index.js:8:21)
    at decodeImageData (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/@unpic/pixels/esm/src/get-pixels.js:20:32)
    at getPixels (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/@unpic/pixels/esm/src/get-pixels.js:39:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async generateBlurhash (/Users/sam/Documents/GitHub/legacy-project/src/pages/api/blurhash/generate.json.ts:11:20)
    at async Module.POST (/Users/sam/Documents/GitHub/legacy-project/src/pages/api/blurhash/generate.json.ts:19:22)
    at async callEndpoint (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/core/endpoint/index.js:103:16)
    at async #tryRenderRoute (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/core/pipeline.js:114:24)
    at async DevPipeline.renderRoute (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/core/pipeline.js:52:20)
    at async handleRoute (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/vite-plugin-astro-server/route.js:156:18)
    at async run (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/vite-plugin-astro-server/request.js:53:14)
    at async runWithErrorHandling (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/vite-plugin-astro-server/controller.js:64:5)
    at async handleRequest (file:///Users/sam/Documents/GitHub/legacy-project/node_modules/astro/dist/vite-plugin-astro-server/request.js:47:3)
ascorbic commented 10 months ago

Hey. Thanks for the report. That's a 30MP image, which is going to be pretty huge when decompressed. I strongly recommend using a smaller image for the blurhash calculation. unpic can easily generate resized image URLs for Storyblok, so I would pass them through that first. e.g. 

import { transformUrl } from "unpic";

const url = transformUrl({
  url: "https://a.storyblok.com/f/158991/6720x4480/51600d6bdf/led-birds-nest-production-pictures.jpg",
  width: 400,
  height: 300,
});

...gives a much more reasonable: https://a.storyblok.com/f/158991/6720x4480/51600d6bdf/led-birds-nest-production-pictures.jpg/m/400x300

ascorbic commented 10 months ago

Closing because I don't think this is a bug, or if it is then it's in the upstream jpeg-js library