demo page with WebP decoding in JavaScript

827 views
Skip to first unread message

Pascal Massimino

unread,
Feb 8, 2017, 11:34:28 AM2/8/17
to WebP Discussion
Hi,

having a JavaScript version of the WebP decoder has been a recurring topic since.. well... quite some time.

Turns out, Emscripten can compile libwebp-0.6.0 without all the previous issues (byte-order, etc).
There's been some recent commits[4] in the library to facilitate the compilation of libwebp into a webp.js [3] version of it, using CMake and Emscripten.

I've set up a little demo of the resulting decoder here: 


Notes:
  * the first ever decode is slower, due to JS translation.
  * doesn't support animation
  * doc is sparse [1], and the API is minimal
  * targetting WebAssembly [2] is as easy as adding '-s WASM=1' to the final linking of webp.js
  * if there's enough interest, webp.js might become part of the officially released archives. Nothing settled for now, it's just a proof-of-concept.

enjoy!
skal/


[*] It might not be the final destination for the demo, but at least for now, it lives there.

Pascal Massimino

unread,
Mar 21, 2017, 9:40:37 AM3/21/17
to WebP Discussion
Hi,

a quick update:

On Wed, Feb 8, 2017 at 5:34 PM, Pascal Massimino <pascal.m...@gmail.com> wrote:
Hi,

having a JavaScript version of the WebP decoder has been a recurring topic since.. well... quite some time.

Turns out, Emscripten can compile libwebp-0.6.0 without all the previous issues (byte-order, etc).
There's been some recent commits[4] in the library to facilitate the compilation of libwebp into a webp.js [3] version of it, using CMake and Emscripten.

I've set up a little demo of the resulting decoder here: 


Notes:
  * the first ever decode is slower, due to JS translation.
  * doesn't support animation
  * doc is sparse [1], and the API is minimal
  * targetting WebAssembly [2] is as easy as adding '-s WASM=1' to the final linking of webp.js

the WASM [1] version is now working. See the demo page:


It takes a fairly recent browser to view it, one that supports native-wasm method.
The corresponding CMake configuration has been added to libwebp [2]. You can experiment with (slower) method like asmjs, interpret-binary, etc.
by just changing the libwebp/CMakeLists.txt configuration of the target webp_wasm [3].

And it's pretty fast, too!

skal/


shr...@gmail.com

unread,
Oct 22, 2017, 3:44:25 AM10/22/17
to WebP Discussion
Hi!

Is it possible to use WebPDecodeRGB with webp.js and could you provide an example?


Thank you!

toma...@gmail.com

unread,
Jun 10, 2018, 1:04:39 AM6/10/18
to WebP Discussion
Heyo Skal!

Astonishing work on the WASM port. I was wondering, after building it created an img2webp.js (and wasm) but I can't seem to make it work, would you be able to provide the HTML snippet??

My guess is it won't work, since it's trying to load a file from the drive, not from a URL. Doesn't matter what I call `callMain` with, it always says couldn't open input file.

Thank you very much for the work already done.

Pascal Massimino

unread,
Jun 11, 2018, 11:00:07 AM6/11/18
to WebP Discussion
Hi Tomas,

On Sun, Jun 10, 2018 at 4:33 AM, <toma...@gmail.com> wrote:
Heyo Skal!

Astonishing work on the WASM port. I was wondering, after building it created an img2webp.js (and wasm) but I can't seem to make it work, would you be able to provide the HTML snippet??

My guess is it won't work, since it's trying to load a file from the drive, not from a URL. Doesn't matter what I call `callMain` with, it always says couldn't open input file.

It's probably complex to map img2webp directly into js with wasm. This was really designed to be a command-line tool.

For file interaction, have you tried the FileReader api? (so that you can read some data from file and feed the WASM-compiled libwebp with it).
With a quick search, i found these tutorials: [1] [2]

hope it helps,
skal/


 

Thank you very much for the work already done.

On Sunday, October 22, 2017 at 3:44:25 AM UTC-4, Никита Е wrote:
Hi!

Is it possible to use WebPDecodeRGB with webp.js and could you provide an example?


Thank you!

--
You received this message because you are subscribed to the Google Groups "WebP Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to webp-discuss+unsubscribe@webmproject.org.
To post to this group, send email to webp-d...@webmproject.org.
Visit this group at https://groups.google.com/a/webmproject.org/group/webp-discuss/.
For more options, visit https://groups.google.com/a/webmproject.org/d/optout.

Tomas Roggero

unread,
Jun 11, 2018, 11:07:36 AM6/11/18
to webp-d...@webmproject.org
Hi Pascal,

Right. I was thinking actually in need of the `WebPEncodeRGBA` method, not the img2webp (despite the name, does something else) but I was unable to export it, I do lack sufficient knowledge on C/Wasm. I've tried adding it to EXPORTED_FUNCTIONS (prefix with underscore) in CMakeLists.txt and rebuild everything, but the function wasn't still exporting for some reason. I guess I am missing some kind of "add_executable" equivalent to import the function.

I have the file in the front-end in PNG format, and want to convert it to webp (yes, the other way around of what everyone on the internet does)

This would allow me to build a MediaRecorder (JS API) fallback for iOS devices, so quite useful feature.

--
You received this message because you are subscribed to a topic in the Google Groups "WebP Discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/a/webmproject.org/d/topic/webp-discuss/VyIt_vf0sOU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to webp-discuss+unsubscribe@webmproject.org.

To post to this group, send email to webp-d...@webmproject.org.
Visit this group at https://groups.google.com/a/webmproject.org/group/webp-discuss/.
For more options, visit https://groups.google.com/a/webmproject.org/d/optout.



--

NFTs 2 Me

unread,
Feb 10, 2023, 4:51:33 AM2/10/23
to WebP Discussion, Pascal Massimino
El miércoles, 8 de febrero de 2017 a las 17:34:28 UTC+1, Pascal Massimino escribió:

  * doesn't support animation


Has this changed?
Does it support animation?
 
Documentation is quite scarce (https://github.com/webmproject/libwebp/blob/main/webp_js/README.md), it would be great to add more examples dealing with animated webp images, getting their delay...

James Zern

unread,
Feb 13, 2023, 4:33:04 PM2/13/23
to webp-d...@webmproject.org
Hi,

On Fri, Feb 10, 2023 at 1:51 AM NFTs 2 Me <nft...@gmail.com> wrote:


El miércoles, 8 de febrero de 2017 a las 17:34:28 UTC+1, Pascal Massimino escribió:

  * doesn't support animation


Has this changed?
Does it support animation?

The simple example used by webp_js [1] only supports still images. It should be possible to emulate vwebp [2] by using the WebPAnimDecoder API [3], but I don't have a wasm example to share.
 
 
Documentation is quite scarce (https://github.com/webmproject/libwebp/blob/main/webp_js/README.md), it would be great to add more examples dealing with animated webp images, getting their delay...

Reply all
Reply to author
Forward
0 new messages