5 ms·
JavaScript Image Compress Using HTML5 Canvas and File API Before Upload
- mcraiha 7y agoThere should be a law that says: "one shall not use var in JavaScript code examples"
- yoz-y 7y agoDon't linters complain about it nowadays? Maybe devtools should start doing it too.
- accosine 7y agoThis can be done in like five lines of Javascript. Why does this even rank on HN?
- untog 7y agoWhat's the minimum number of lines before code becomes notable enough for HN?
- ghostbrainalpha 7y ago7 can be acceptable in some cases, but just to be safe I suggest 8 lines. // 8 Lines not including sarcastic comments obviously.
- raxor53 7y agoThese are the new standards, please send out a memo.
- tmikaeld 7y agoThere 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 https://github.com/WangYuLue/image-conversion
- Piskvorrr 7y agoDatabase hugged to death :( Oh wait. It's a redirect to StackOverflow?! https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload https://stackoverflow.com/questions/23945494/use-html5-to-re...
- throwaway_bad 7y agoSquoosh is a much better demo of how to do in-browser compression (using optipng, mozjpeg, etc): https://github.com/GoogleChromeLabs/squoosh/ 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/HTMLCanvasElement/toBlob https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE...)
- tracker1 7y agoI 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.
- throwaway_bad 7y agoYea I wished it were easier to use out of the box too. The code is fortunately very well organized so you can just copy the pieces you need: https://github.com/GoogleChromeLabs/squoosh/tree/master/src/codecs https://github.com/GoogleChromeLabs/squoosh/tree/master/src/... It also does make sense for you to pick and choose only the compression codecs you will need. Otherwise the cost of making every client download huge and unused wasm libraries might outweigh any bandwidth savings from compression.
- huzoorbux 7y agoI have used JIC JavaScript Library to perform this task. https://raw.githubusercontent.com/brunobar79/J-I-C/master/src/JIC.js https://raw.githubusercontent.com/brunobar79/J-I-C/master/sr...
- devwastaken 7y agobrowsers 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.