1*b2055c35SXin Li# WebP JavaScript decoder 2*b2055c35SXin Li 3*b2055c35SXin Li``` 4*b2055c35SXin Li __ __ ____ ____ ____ __ ____ 5*b2055c35SXin Li/ \\/ \ _ \ _ \ _ \ (__)/ __\ 6*b2055c35SXin Li\ / __/ _ \ __/ _) \_ \ 7*b2055c35SXin Li \__\__/_____/____/_/ /____/____/ 8*b2055c35SXin Li``` 9*b2055c35SXin Li 10*b2055c35SXin LiThis file describes the compilation of libwebp into a JavaScript decoder using 11*b2055c35SXin LiEmscripten and CMake. 12*b2055c35SXin Li 13*b2055c35SXin Li- install the Emscripten SDK following the procedure described at: 14*b2055c35SXin Li https://emscripten.org/docs/getting_started/downloads.html#installation-instructions-using-the-emsdk-recommended 15*b2055c35SXin Li After installation, you should have some global variable positioned to the 16*b2055c35SXin Li location of the SDK. In particular, $EMSDK should point to the top-level 17*b2055c35SXin Li directory containing Emscripten tools. 18*b2055c35SXin Li 19*b2055c35SXin Li- configure the project 'WEBP_JS' with CMake using: 20*b2055c35SXin Li 21*b2055c35SXin Li ```shell 22*b2055c35SXin Li cd webp_js && \ 23*b2055c35SXin Li emcmake cmake -DWEBP_BUILD_WEBP_JS=ON ../ 24*b2055c35SXin Li ``` 25*b2055c35SXin Li 26*b2055c35SXin Li- compile webp.js using 'emmake make'. 27*b2055c35SXin Li 28*b2055c35SXin Li- that's it! Upon completion, you should have the 'webp.js', 'webp.js.mem', 29*b2055c35SXin Li 'webp_wasm.js' and 'webp_wasm.wasm' files generated. 30*b2055c35SXin Li 31*b2055c35SXin LiThe callable JavaScript function is WebPToSDL(), which decodes a raw WebP 32*b2055c35SXin Libitstream into a canvas. See webp_js/index.html for a simple usage sample (see 33*b2055c35SXin Libelow for instructions). 34*b2055c35SXin Li 35*b2055c35SXin Li## Demo HTML page 36*b2055c35SXin Li 37*b2055c35SXin LiThe HTML page webp_js/index.html requires the built files 'webp.js' and 38*b2055c35SXin Li'webp.js.mem' to be copied to webp_js/. An HTTP server to serve the WebP image 39*b2055c35SXin Liexample is also needed. With Python, just run: 40*b2055c35SXin Li 41*b2055c35SXin Li```shell 42*b2055c35SXin Licd webp_js && python3 -m http.server 8080 43*b2055c35SXin Li``` 44*b2055c35SXin Li 45*b2055c35SXin Liand then navigate to http://localhost:8080 in your favorite browser. 46*b2055c35SXin Li 47*b2055c35SXin Li## Web-Assembly (WASM) version: 48*b2055c35SXin Li 49*b2055c35SXin LiCMakeLists.txt is configured to build the WASM version when using the option 50*b2055c35SXin LiWEBP_BUILD_WEBP_JS=ON. The compilation step will assemble the files 51*b2055c35SXin Li'webp_wasm.js' and 'webp_wasm.wasm' that you then need to copy to the webp_js/ 52*b2055c35SXin Lidirectory. 53*b2055c35SXin Li 54*b2055c35SXin LiSee webp_js/index_wasm.html for a simple demo page using the WASM version of the 55*b2055c35SXin Lilibrary. 56*b2055c35SXin Li 57*b2055c35SXin Li## Caveats 58*b2055c35SXin Li 59*b2055c35SXin Li- First decoding using the library is usually slower, due to just-in-time 60*b2055c35SXin Li compilation. 61