node.jsangularimage-uploadsharpjimp

How to send reduced/optimised images from node server to Angular client (but save original quality to database)


I'm working on a project which requires an image database. Many of the images are rather larger than they need to be for 90% of the use cases of the application, however, there are cases where I need the original quality image.Therefore, I cannot reduce the image before uploading/saving to the filesystem (MongoDB database).

My plan was to reduce the size of the image after retrieving the original from MongoDB but before actually sending it from the Node server to the Angular client.

I cannot find an example of this using either Sharp or Jimp (which seem to be leading contenders) and I'm struggling to make either work:

Could anyone point me in the right direction about how to achieve this?


Solution

  • In the end, after discussing multiple strategies with my superior, I saved each image with a high definition image (base64) string, and a reduced image string. I was fortunate in that the only time I needed high definition images I was calling a single image by id, therefore I queried the database to return only the image string which was required by the front end.

    If anyone does query this or something similar in future I used Sharp on the backend to facilitate the image resizing.

    The errors in Jimp and Sharp initially came from attempting to work with the binary. In the end it was simpler to convert the image to a string from the offset.