dany/libwebp
1
0
Fork 0
mirror of https://github.com/webmproject/libwebp.git synced 2024-11-19 20:08:28 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity
main
libwebp/webp_js
History
James Zern f88666eb47 webp_js/*.html: fix canvas mapping 
after:
24d7f9cb Switch code to SDL2.

fixes:
webp_wasm.js:1 Uncaught TypeError: Cannot read properties of null
    (reading 'addEventListener')
    at Object.registerOrRemoveHandler (webp_wasm.js:1:101330)
    at registerMouseEventCallback (webp_wasm.js:1:154227)
    at _emscripten_set_mousemove_callback_on_thread (webp_wasm.js:1:155015)
    ...

The SDL2 port forces the canvas id to '#canvas':
324df6865a/src/video/emscripten/SDL_emscriptenvideo.c (L210)

This change maps '#output_canvas' to this entry in specialHTMLTargets[]:
https://emscripten.org/docs/api_reference/html5.h.html

https://github.com/libsdl-org/SDL/issues/5260 &
https://github.com/emscripten-ports/SDL2/issues/130 may also be related.

Change-Id: I26f4aa22b9d68b0fc45b83edfe6fe074b59a82a7
Test: emscripten 3.1.16
2024-03-29 12:53:05 -07:00
..
index_wasm.html webp_js/*.html: fix canvas mapping 2024-03-29 12:53:05 -07:00
index.html webp_js/*.html: fix canvas mapping 2024-03-29 12:53:05 -07:00
README.md Switch code to SDL2. 2023-10-28 23:36:35 +02:00
test_webp_js.webp WASM support 2017-03-21 14:07:22 +01:00
test_webp_wasm.webp WASM support 2017-03-21 14:07:22 +01:00

README.md

WebP JavaScript decoder

 __   __ ____ ____ ____     __  ____
/  \\/  \  _ \  _ \  _ \   (__)/  __\
\       /  __/ _  \  __/   _)  \_   \
 \__\__/_____/____/_/     /____/____/

This file describes the compilation of libwebp into a JavaScript decoder using Emscripten and CMake.

  • install the Emscripten SDK following the procedure described at: https://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended After installation, you should have some global variable positioned to the location of the SDK. In particular, $EMSDK should point to the top-level directory containing Emscripten tools.

  • configure the project 'WEBP_JS' with CMake using:

    cd webp_js && \
emcmake cmake -DWEBP_BUILD_WEBP_JS=ON ../

  • compile webp.js using 'emmake make'.

  • that's it! Upon completion, you should have the 'webp.js', 'webp.js.mem', 'webp_wasm.js' and 'webp_wasm.wasm' files generated.

The callable JavaScript function is WebPToSDL(), which decodes a raw WebP bitstream into a canvas. See webp_js/index.html for a simple usage sample (see below for instructions).

Demo HTML page

The HTML page webp_js/index.html requires the built files 'webp.js' and 'webp.js.mem' to be copied to webp_js/. An HTTP server to serve the WebP image example is also needed. With Python, just run:

cd webp_js && python3 -m http.server 8080

and then navigate to http://localhost:8080 in your favorite browser.

Web-Assembly (WASM) version:

CMakeLists.txt is configured to build the WASM version when using the option WEBP_BUILD_WEBP_JS=ON. The compilation step will assemble the files 'webp_wasm.js' and 'webp_wasm.wasm' that you then need to copy to the webp_js/ directory.

See webp_js/index_wasm.html for a simple demo page using the WASM version of the library.

Caveats

  • First decoding using the library is usually slower, due to just-in-time compilation.