multiple sizes of the same image

[a-kolybelnikov]

Great piece of software! How would I go about making three (... more) copies of different sizes of the same image? Before, for example, an s3 upload ... ? Thanks!

[nitin42]

Any idea how API could look like?

[akolybelnikov]

1. user uploads an image with a file-upload.
2. ideally, at this point I would like to resize the image ( ...multiple sizes?)
3. I'm uploading the resized image(s) to s3.

At the moment, I cannot get hold of the uploaded file at all: I guess I need to pass a url to 'image', but I can't figure outwhat exactly the FileReader has to return.

[nitin42]

FileReader returns an ArrayBuffer. You could create a blob url and then pass it as a prop the component and then apply the resize.

[nitin42]

The component is monolithic but it doesn't have the power to reproduce the same effect on a number of images. You can use composition in your use case.

Behind the scene, all operations are performed in series of chain on a single image. I'll see what I can do to support multiple images.

[akolybelnikov]

I think my user case just requires a different functionality. I have implemented a serverless resize on the fly with AWS and it's all I need for the moment in terms of multiple versions of the same image for various screens. However, I will be playing around with your component a lot.

How do you actually implement Jimp, in the front-end? I have tried using it before but encountered the 'no Buffer defined' issue, because it is something Node.js has natively and the front-end doesn't. Many thanks!

[nitin42]

I am using Jimp by passing down the image source and image props via this function and then processing the image with the Jimp instance (either in service worker or in main thread) via dependency injection.

[nitin42]

Closing this because it relates to your business logic and not the library actually!