0

I want to compress images uploaded by the <InputFile /> component on client-side (before uploading to the server).

I already tried compressing it using System.Drawing library. But that solution didn't work because due to GDI+ dependencies System.Drawing is not allowed to be used in Blazor-wasm.

If anyone has any idea on how to reduce image size (on client-side) please help me find the solution.

Thank you.

Rushit Saliya
  • 1
  • 3
  • What do you mean by "compress"? Most image formats, except TIF and BMP, are already compressed. Trying to compress them more will have little effect. You can, however, resize images on the client side before uploading them. That will reduced the number of bytes uploaded. Yet, resize and compress are different operations. – Yogi Apr 27 '22 at 06:54
  • For a common data-driven task like that, one very real option is to find a JavaScript library that will do it for you and call it using JS Interop. https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload To be honest though, unless I was trying to upload really massive files, I think it's probably better to process the images server-side rather than client-side. – Bennyboy1973 Apr 27 '22 at 11:08
  • @Bennyboy1973 I'm developing PWA with offline support. In my app user may upload large photos (~3-5 MB). I'm storing photos (by converting them to base64) in IndexedDb if the user is offline. But those large image files are throwing some memory exceptions. That is why I want to compress uploaded images from the client-side only. So that I can store compressed ones to IndexedDb. – Rushit Saliya Apr 28 '22 at 00:30
  • Personally I wouldn't use a database for storing images. There are so many good options for blob storage now. That being said, I looked up the use of a few libraries like ImageSharp, and it seems like their use is not really recommended for client-side only applications. I really suspect that you should just do this task in pure JavaScript. – Bennyboy1973 Apr 28 '22 at 03:48
  • @Bennyboy1973 Is there any javascript solution where I pass image (as a base64 string) and get the compressed one? – Rushit Saliya May 01 '22 at 02:02
  • I'm not really an expert in JavaScript Image processing. In Blazer, I use server-side for image processing. But I had a relatively similar issue with recording audio and wanting to convert that, and I decided it was easiest to do it in JavaScript before uploading my file to the server. https://www.google.com/search?q=how+to+compress+base64+image – Bennyboy1973 May 01 '22 at 05:28
  • @Bennyboy1973 thanks for the response, but in my case I absolutely can not upload my file to server as my is going to be working offline. If anyone has any idea for the same, please do suggest. – Rushit Saliya May 02 '22 at 01:13
  • If you're not uploading the image, then why do you need to compress it? You can save much more memory by downsizing images. – Bennyboy1973 May 02 '22 at 02:47
  • @Bennyboy1973 I want to preserve the original dimension of the uploaded images. Because the image will be uploaded eventually (once the user connects to the internet). I just want to reduce the size of the image in terms of bytes (from ~3-4 MB to ~100-200 KB). – Rushit Saliya May 02 '22 at 03:14
  • Once you have an image blob memory, it doesn't matter what you do with it. You can use it as the source of an image on the client without uploading it, and later you can upload it to an API on your server. – Bennyboy1973 May 02 '22 at 09:39

0 Answers0