Hacker News new | ask | show | jobs
by ino 2985 days ago
Will we ever have a way to tell the browser engine to shrink images to some maximum dimensions before uploading them to the server, without javascript?

Is there any work being done in that direction? Javascript implementations like Pica - http://nodeca.github.io/pica/demo/ are slow even with wasm. It'd also be nice not to rely on javascript for such fundamental things.

1 comments

Wouldn't that be pretty trivial with just a <canvas> element?

use the `drawImage` function to draw the image scaled to whatever size you want, then just call any of the APIs that you want to get either ImageData, a base64-encoded-URI, or a PNG Blob resized.

The exact method of resize is up to the useragent (IIRC i could be wrong on this), and it's done in "native" code, not in javascript.

png would be huge (since it is lossless) and jpg would incur double compression (source jpg and re-compressed from canvas) losing quality.
Is there any solution other than those 2 options?

Any resizing of a jpg to another jpg is going to incur double compression isn't it? Sure there are ways of mitigating it using various sampling and resizing algorithms, but it's not going to be perfect, and there is no "one-size-fits-all" best algorithm.

What would a "browser API" provide that you can't already get with canvas?The only thing I can think of is customizable resize algorithms, but I'd rather have the option to change that for a canvas, rather than a specific "resize this image API".