Home/ Questions/Q 8275659
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T08:08:45+00:00

In a webappp I am currently creating the user has to provide images that

  • 0

In a webappp I am currently creating the user has to provide images that get stored server side in a database. To minimize server load I am handling image resizing client-side courtesy of the HTML5 Canvas and getting the user to pre-approve the quality of the resized image.

The issue I have run into is this – the file size of the resized image is big. If I resize the same image with Paint.NET I can get a perfectly decent light weight 8 bit PNG image. Even the 32 bit Paint.NET image is smaller than the one that turns up on the server via toDataURL. I tried playing around with the toDataURL quality parameter but changing it has no effect whatsoever – exactly the same data size.

I should mention tha t I am testing with Chrome 20.0.1132.57 m and that the only browsers that are relevant to the app are the desktop versions of Chrome and Safari.

I know I could do some server side image processing but I want to avoid that if possible. Question – what, if anything can I do to cut down on the image file size sent out from the browser?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Browsers may happily ignore any quality parameter given for the toDataUrl and such. I don’t believe honoring it is mandatory by the specification.

    The only way to control the quality exactly would be

    • Write your own PNG compressor in JS or use something you can steal from the internets https://github.com/imaya/CanvasTool.PngEncoder

    • Dump <canvas> data to ArrayBuffer

    • Pass this to WebWorker

    • Let WebWorker compress it using your PNG compressor library

    I believe there exist JPEG/PNG encoding and decoding solutions already.

    Alternative you may try canvas.mozGetAsFile() / canvas.toBlob(), but I’ll believe browsers still won’t honour quality parameters.

    https://developer.mozilla.org/en/DOM/HTMLCanvasElement/

    • 0