asilvas / node-image-steam

A simple, fast, and highly customizable on-the-fly image manipulation web server built atop Node.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

GIF is not working.

linearloopdevops opened this issue · comments

The source you linked is in webp format, so I'm guessing you're asking about gif support for output format? If you update to 0.64.0 you can use fm=f:gif in querystring. It's a pretty terrible format, but it's there if you need it.

Thanks @asilvas , Is it necessary to pass fm=f:gif ? can we bypass this query string?

isteam's default behaviors are optimized for quality and performance, neither of which gif is good for. So yes it is necessary to pass the querystring to override this behavior.

Hi @asilvas
As per your above suggestion, I made changes and checked it. based on the format response header content-type "image/gif" but still now working as expected can you please check on that and give me suggestions on that?

Let me share some configurations and URLs

from URL: https://staging-backend-ledstripkoning.ledkoning.nl/uploads/tx_multishop/images/products/original/2-m/2-meter-rgb-led-strip-complete-set-120-leds.gif

converted URL: https://staging-cdn.ledstripkoning.nl/uploads/tx_multishop/images/products/original/2-m/2-meter-rgb-led-strip-complete-set-120-leds.gif?fm=f:gif

Image stream config:
imageStream: { http: [ { port: process.env.PORT || 1500, }, ], storage: { defaults: { driver: 'http', endpoint: process.env.IMAGE_ENDPOINT || 'https://staging-backend.bvbshop.nl', }, cache: { driver: 'fs', path: path.resolve(__dirname, '../storage/cache'), }, cacheOptimized: { driver: 'fs', path: path.resolve(__dirname, '../storage/cacheOptimized'), }, // cacheArtifacts: false, cacheTTS: process.env.CACHE_TTS || 600, cacheOptimizedTTS: process.env.CACHE_OPTIMIZED_TTS || 300, replicas: { otherPlace: { cache: { driver: 'fs', path: path.resolve(__dirname, '../storage/replica-cache'), }, cacheOptimized: { driver: 'fs', path: path.resolve(__dirname, '../storage/replica-cacheOptimized'), }, }, }, }, router: { steps: { fm: { name: 'format', f: 'format', }, }, pathDelimiter: '?', supportWebP: process.env.SUPPORT_WEBP ? JSON.parse(process.env.SUPPORT_WEBP) : true, // This is for cloudflare // canDisableCache: true, }, },

Please confirm that it doesn't work without changes to routing (namely changing the pathDelimiter). Querystring has been reserved for non-routing options so verifying your config isn't breaking things before I investigate the gif issue.

Yes we tried to remove pathDelimiter and tried with a default configuration but still, it doesn’t work.

Oh I see what you mean. You didn't want gif support, you wanted animated gif support. This is not currently an option. Happy to take a PR but due to the fact that animated GIF's cannot be processed in real-time, it's not well suited for image-steam.

Can we bypass and directly use an original image without the image-stream process? Is there any option to pass in query string?

Happy to take a PR to enable animated images via querystring. In the mean time, I'm not sure if it satisfies your needs, but you can forcefully enable animations for all images by updating config:

processor: {
  sharp: {
    defaults: { animated: true }
  }
}

Hello @asilvas
As per your suggested above configurations, GIF animation working fine, But the GIF Image ratio changed.
let me give you two URLs below:

Original Image: https://staging-backend-ledstripkoning.ledkoning.nl/uploads/tx_multishop/images/products/original/2-m/2-meter-rgb-led-strip-complete-set-120-leds.gif

Converted Image: https://staging-cdn.ledstripkoning.nl/uploads/tx_multishop/images/products/original/2-m/2-meter-rgb-led-strip-complete-set-120-leds.gif

Can you please check on this? why image ratio on animated GIF Images?

0.64.1 published which appears to resolve.

Hello @asilvas

I upgrade the version and it's working fine.

Thanks a lot.