search

jhuckaby / webp-wasm

Encode and decode WEBP images using libwebp compiled to WebAssembly.
MIT License
18 stars 0 forks source link

How to use in browser? #3

Closed a0s closed 3 months ago

a0s commented 3 months ago

How to use with browser? My setup is "vue3 vite typescript" What i get:

Module "util" has been externalized for browser compatibility. 
Cannot access "util.promisify" in client code. 
See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility 
for more details.

Uncaught TypeError: util.promisify is not a function
    at node_modules/webp-wasm/index.js (index.js:144:28)
    at __require (chunk-LQ2VYIYD.js?v=96781a35:8:50)
    at index.js:146:63
jhuckaby commented 3 months ago

This project, webp-wasm, is ONLY for use in Node.js on the server. The WASM sources were taken from Google's Squoosh and CONVERTED to work on Node.js land. If you are trying to load WebP images in the browser, then.....

(1) All major browsers now support WebP natively. See Can I Use for the support matrix. It's basically universal now. You should not need a WASM WebP library at all anymore on the client-side.

(2) If for some reason you cannot use the built-in browser WebP system, and you must load it using WASM, check out Squoosh: https://squoosh.app/ -- Source: https://github.com/GoogleChromeLabs/squoosh -- This is where I got the WebP WASM blobs, and their version works in the browser. Don't use my hacked one.

a0s commented 3 months ago

Got it. The reason why I need WASM WebP is because iOS Safari Canvas has a limit of 4096x4096. I need to process images that are much bigger. I've created a VirtualCanvas library that manages tiled images (every tile is OffscreenCanvas elements 4096x4096). Now, I need a way to stitch all tiles into one huge WebP file without using an intermediate OffscreenCanvas.

jhuckaby commented 3 months ago

Ah, gotcha. I wish they'd increase that limit. Most phones nowadays could easily handle 16384x16384 or more.