JavaScript Image Compress Using HTML5 Canvas and File API Before Upload (opens in new tab)

(phplift.net)

32 pointshuzoorbux6y ago13 comments

13 comments

Database hugged to death :(

Oh wait. It's a redirect to StackOverflow?!

https://stackoverflow.com/questions/23945494/use-html5-to-re...

Squoosh is a much better demo of how to do in-browser compression (using optipng, mozjpeg, etc): https://github.com/GoogleChromeLabs/squoosh/

There are far more knobs you can tune whereas the native browser conversion only has mimetype and quality (via toBlob: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...)

tracker16y ago

I really like Squoosh... I'm not sure if they have yet, but there was at one time discussion of separating the builds for the underlying wasm built libraries from squoosh whole, which would make it more usable for separate projects.

1 more reply

huzoorbuxOP6y ago

I have used JIC JavaScript Library to perform this task.

https://raw.githubusercontent.com/brunobar79/J-I-C/master/sr...

accosine6y ago

This can be done in like five lines of Javascript. Why does this even rank on HN?

tmikaeld6y ago

There might not be that many that know about it?

Image-conversion is the library I've used the most, since you can target file-size || quality:

https://github.com/WangYuLue/image-conversion

untog6y ago

What's the minimum number of lines before code becomes notable enough for HN?

ghostbrainalpha6y ago

7 can be acceptable in some cases, but just to be safe I suggest 8 lines.

// 8 Lines not including sarcastic comments obviously.

1 more reply

devwastaken6y ago

browsers need to have an API to access the underlying libraries. No reason I shouldn't be able to use turbojpeg or libpng clientside. Can't even do it in WebAssembly, because simd was an afterthought.

mcraiha6y ago

There should be a law that says: "one shall not use var in JavaScript code examples"

yoz-y6y ago

Don't linters complain about it nowadays? Maybe devtools should start doing it too.

j / k navigate · click thread line to collapse

13 comments

Piskvorrr6y ago

Database hugged to death :(

Oh wait. It's a redirect to StackOverflow?!

https://stackoverflow.com/questions/23945494/use-html5-to-re...

throwaway_bad6y ago

Squoosh is a much better demo of how to do in-browser compression (using optipng, mozjpeg, etc): https://github.com/GoogleChromeLabs/squoosh/

There are far more knobs you can tune whereas the native browser conversion only has mimetype and quality (via toBlob: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...)

tracker16y ago

1 more reply

huzoorbuxOP6y ago

I have used JIC JavaScript Library to perform this task.

https://raw.githubusercontent.com/brunobar79/J-I-C/master/sr...

accosine6y ago

This can be done in like five lines of Javascript. Why does this even rank on HN?

tmikaeld6y ago

There might not be that many that know about it?

Image-conversion is the library I've used the most, since you can target file-size || quality:

https://github.com/WangYuLue/image-conversion

untog6y ago

What's the minimum number of lines before code becomes notable enough for HN?

ghostbrainalpha6y ago

7 can be acceptable in some cases, but just to be safe I suggest 8 lines.

// 8 Lines not including sarcastic comments obviously.

1 more reply

devwastaken6y ago

mcraiha6y ago

There should be a law that says: "one shall not use var in JavaScript code examples"

yoz-y6y ago

Don't linters complain about it nowadays? Maybe devtools should start doing it too.

j / k navigate · click thread line to collapse