wasm-webp 0.0.1 → 0.1.0

package/README.md

@@ -1,8 +1,16 @@
 # webp.wasm
 
-webp.wasm is a pure Webassembly / Javascript port of libwebp.
+webp.wasm is a pure Webassembly / Javascript port of libwebp. The library supports encoding animated WebP.
 
 ![CI](https://github.com/nieyuyao/webp-wasm/workflows/CI/badge.svg)
+![latest tag](https://badgen.net/github/release/nieyuyao/webp-wasm)
+![npm](https://img.shields.io/npm/v/wasm-webp.svg)
+
+## Install
+
+```shell
+npm i wasm-webp
+```
 
 ## APIs
 
@@ -72,21 +80,21 @@ const webpData = await encodeRGBA(imgData.data, canvas.width, canvas.height)
 ...
 ```
 
-#### encode
+ #### encode
 
 A more advanced API is based on the WebPConfig. <b>Only the lossless and quality parameters are supported now !!!</b>. You can generate low-quality webp with this function.
 
 `function encodeRGBA(data: Uint8Array, width: number, height: number, hasAlpha: boolean,config: Partial<WebPConfig>): Promise<Nullable<Uint8Array>>`
 
-- hasAlpha: boolean
+- hasAlpha: `boolean`
 
 Whether to include alpha chanel.
 
-- WebPConfig.lossless: number
+- WebPConfig.lossless: `number`
 
 Lossless encoding (0=lossy(default), 1=lossless).
 
-- WebPConfig.quality: number
+- WebPConfig.quality: `number`
 
 Between 0 and 100. Default value is 100.
 
@@ -107,20 +115,24 @@ Returns animated WebP like `GIF`.
 
 `function encodeAnimation(width: number, height: number, hasAlpha: boolean, frames: WebPAnimationFrame[]): Promise<Nullable<Uint8Array>>`
 
-- hasAlpha: boolean
+- hasAlpha: `boolean`
 
 Whether to include alpha chanel.
 
 The WebPAnimationFrame has follow properties:
 
-- WebPAnimationFrame.data: Uint8Array
+- WebPAnimationFrame.data: `Uint8Array`
 
 Frame bitmap.
 
-- WebPAnimationFrame.duration: number
+- WebPAnimationFrame.duration: `number`
 
 Duration of frame.
 
+- WebPAnimationFrame.config: `WebPConfig` (optional)
+
+Per-frame encoding configuration. If not provided, default config is used (lossless: 0, quality: 100).
+
 ##### Example
 
 ```javascript
@@ -130,6 +142,12 @@ frames.push({
   data: ctx.getImageData(0, 0, 100, 100).data,
   duration: 20
 })
+// with per-frame config
+frames.push({
+  data: ctx.getImageData(0, 0, 100, 100).data,
+  duration: 20,
+  config: { lossless: 0, quality: 80 }
+})
 const webpData = await encodeAnimation(100, 100, true, frames)
 ...
 // download webp
@@ -174,7 +192,7 @@ fr.onload = () => {
 	canvas.style.height = `${result.height}px`
 	canvas.width = result.width
 	canvas.height = result.height
-	ctx.putImageData(result, 0, 0)
+	ctx.putImageData(new ImageData(new Uint8ClampedArray(result.data)), 0, 0)
 }
 // read webp file
 fr.readAsArrayBuffer(file)
@@ -206,28 +224,73 @@ fr.readAsArrayBuffer(file)
 ...
 ```
 
+#### decodeAnimation
+
+Decoding animated WebP image. Returns an array of frames.
+
+`function decodeAnimation(data: Uint8Array, hasAlpha: boolean): Promise<Nullable<DecodedWebPAnimationFrame[]>>`
+
+##### Example
+
+```javascript
+...
+const fr = new FileReader()
+fr.onload = () => {
+  if (!fr.result) {
+    return
+  }
+  webpData = fr.result as Uint8Array
+  const result = await decodeRGBA(webpData)
+  // draw imageData
+  ...
+}
+// webp file
+fr.readAsArrayBuffer(file)
+...
+```
+
+#### DecodedWebPAnimationFrame
+
+The object have the following properties:
+
+- DecodedWebPAnimationFrame.width: `number`
+
+The frame image width.
+
+- DecodedWebPAnimationFrame.height: `number`
+
+The frame image height.
+
+- DecodedWebPAnimationFrame.duration: `number`
+
+The frame display duration.
+
+- DecodedWebPAnimationFrame.data: `Uint8Array`
+
+Raw data in pixels.
+
 #### WebPDecodedImageData
 
 The object have the following properties:
 
-- WebPDecodedImageData.width: number
+- WebPDecodedImageData.width: `number`
 
 The image width in pixels.
 
-- WebPDecodedImageData.height: number
+- WebPDecodedImageData.height: `number`
 
 The image height in pixels.
 
-- WebPDecodedImageData.data: Uint8Array
+- WebPDecodedImageData.data: `Uint8Array`
 
 Raw data in pixels.
 
-> Note: It looks like an `ImageData` object, but it is not. There is actually no `ImageData` in node.
+> Note: It has same properties as browser `ImageData` object, but it is not. There is actually no `ImageData` in node.
 
 ## Playing Examples
 
 ```shell
-npm run dev
+npm run build-wasm:dev && npm run dev
 ```
 
 ## Building

package/dist/cjs/index.js

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeRGBA = exports.decodeRGB = exports.decoderVersion = exports.encodeAnimation = exports.encode = exports.encodeRGBA = exports.encodeRGB = exports.encoderVersion = void 0;
+exports.decodeAnimation = exports.decodeRGBA = exports.decodeRGB = exports.decoderVersion = exports.encodeAnimation = exports.encode = exports.encodeRGBA = exports.encodeRGB = exports.encoderVersion = void 0;
 // @ts-ignore
 const webp_wasm_1 = __importDefault(require("./webp-wasm"));
 // default webp config
@@ -47,19 +47,20 @@ const encode = (data, width, height, hasAlpha, config) => __awaiter(void 0, void
 exports.encode = encode;
 const encodeAnimation = (width, height, hasAlpha, frames) => __awaiter(void 0, void 0, void 0, function* () {
     const module = yield (0, webp_wasm_1.default)();
-    const durations = [];
-    const dataLength = frames.reduce((acc, frame) => {
-        acc += frame.data.length;
-        return acc;
-    }, 0);
-    const data = new Uint8Array(dataLength);
-    let offset = 0;
-    frames.forEach(frame => {
-        data.set(frame.data, offset);
-        offset += frame.data.length;
-        durations.push(frame.duration);
+    const frameVector = new module.VectorWebPAnimationFrame();
+    frames.forEach((frame) => {
+        const hasConfig = frame.config !== undefined;
+        const config = Object.assign(Object.assign({}, defaultWebpConfig), frame.config);
+        config.lossless = Math.min(1, Math.max(0, config.lossless));
+        config.quality = Math.min(100, Math.max(0, config.quality));
+        frameVector.push_back({
+            duration: frame.duration,
+            data: frame.data,
+            config,
+            has_config: hasConfig,
+        });
     });
-    return module.encodeAnimation(width, height, hasAlpha, durations, data);
+    return module.encodeAnimation(width, height, hasAlpha, frameVector);
 });
 exports.encodeAnimation = encodeAnimation;
 const decoderVersion = () => __awaiter(void 0, void 0, void 0, function* () {
@@ -82,3 +83,8 @@ exports.decodeRGBA = decodeRGBA;
 // 	const module = await Module()
 // 	return module.decode(data, hasAlpha)
 // }
+const decodeAnimation = (data, hasAlpha) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    return module.decodeAnimation(data, hasAlpha);
+});
+exports.decodeAnimation = decodeAnimation;