Image resizing

[alexofob]

I tried slingshot today. I am impressed with the functionality it provides. I have one question though. Is it possible to do image resizing with this package?

This is because most of the photos that users upload are quite big and I would prefer to reduce all photo size to about 150kb or less in order to save space and bandwidth/cost for my users.

Thanks.

[rhyslbw]

+1

[npaton]

I believe image resizing should stay out of scope for Slingshot. It would be nice to see in another package that could be used by any uploading code or in-browser image manipulation. Maybe even in an isobuild so we can have the same apis (while different implementations) for image resizing on front and backend.

It's fairly easy nowadays to do image resizing in the browser. I encountered the situation recently and had to bake up code that works on the latest browsers (untested on IE but is supposed work ?!). Sorry, it's a bit messy. The canvas element can probably be dynamically created (once) instead of inserted into HTML as I did it in this example, I made this quickly...

https://gist.github.com/npaton/c3de742ffb493e8b7611

Aiming for a particular file size is a approximation game depending the size, format and quality of the exported image.

Note here that canvas.toBlob is not supported on all browser but a (slower) polyfill is included. Overall, performance is not amazing but still quite acceptable on a 2-3 year old machine in my experience, for a relatively large input image.

This might be something to clean up and extract into a separate package for those interested. 🍰

[gsuess]

jamgold already made package for this (based on slingshot): https://github.com/jamgold/cropuploader/

[alexofob]

Many thanks for the feedback. I also found this package and I and testing this now.
ccorcos:clientside-image-manipulation

[Billybobbonnet]

@gsuess Could you add to the readme a list of the packages depending on slingshot that you deem good? I will test jamgold package if you haven't, and provide a feedback if you want me to.

By the way, I love slingshot. You did a great job. <3

[karlpokus]

Hi @gsuess ! Thanks for sharing this package.

I'm also looking to resize and crop on the client and I've got that part working fine. However, I notice that uploader.send() takes the file object as an arg and I'm left with a dataURL after resizing (in canvas). Is there a way to use slingshot with a dataURL?