wasm-webp 0.0.1 → 0.0.2

package/README.md

@@ -1,8 +1,9 @@
 # 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)
 
 ## APIs
 
@@ -72,7 +73,7 @@ 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.
 
@@ -174,7 +175,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 +207,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/esm/index.js

@@ -44,7 +44,7 @@ export const encodeAnimation = (width, height, hasAlpha, frames) => __awaiter(vo
     }, 0);
     const data = new Uint8Array(dataLength);
     let offset = 0;
-    frames.forEach(frame => {
+    frames.forEach((frame) => {
         data.set(frame.data, offset);
         offset += frame.data.length;
         durations.push(frame.duration);
@@ -68,3 +68,7 @@ export const decodeRGBA = (data) => __awaiter(void 0, void 0, void 0, function*
 // 	const module = await Module()
 // 	return module.decode(data, hasAlpha)
 // }
+export const decodeAnimation = (data, hasAlpha) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield Module();
+    return module.decodeAnimation(data, hasAlpha);
+});

package/dist/esm/webp-wasm.js

@@ -2572,6 +2572,8 @@ function dbg(...args) {
       return Emval.toHandle(handle[key]);
     };
 
+  var __emval_new_array = () => Emval.toHandle([]);
+
   
   var __emval_new_cstring = (v) => Emval.toHandle(getStringOrSymbol(v));
 
@@ -2802,6 +2804,8 @@ var wasmImports = {
   /** @export */
   _emval_get_property: __emval_get_property,
   /** @export */
+  _emval_new_array: __emval_new_array,
+  /** @export */
   _emval_new_cstring: __emval_new_cstring,
   /** @export */
   _emval_new_object: __emval_new_object,

package/dist/index.d.ts

@@ -1,30 +1,40 @@
-import type { WebPConfig, Nullable, WebPAnimationFrame, WebPDecodedImageData } from './types'
+import type {
+  WebPConfig,
+  Nullable,
+  WebPAnimationFrame,
+  WebPDecodedImageData,
+  DecodedWebPAnimationFrame,
+} from './types'
 export declare const encoderVersion: () => Promise<string>
 export declare const encodeRGB: (
-	rgb: Uint8Array,
-	width: number,
-	height: number,
-	quality?: number
+  rgb: Uint8Array,
+  width: number,
+  height: number,
+  quality?: number
 ) => Promise<Nullable<Uint8Array>>
 export declare const encodeRGBA: (
-	rgba: Uint8Array,
-	width: number,
-	height: number,
-	quality?: number
+  rgba: Uint8Array,
+  width: number,
+  height: number,
+  quality?: number
 ) => Promise<Nullable<Uint8Array>>
 export declare const encode: (
-	data: Uint8Array,
-	width: number,
-	height: number,
-	hasAlpha: boolean,
-	config: Partial<WebPConfig>
+  data: Uint8Array,
+  width: number,
+  height: number,
+  hasAlpha: boolean,
+  config: Partial<WebPConfig>
 ) => Promise<Nullable<Uint8Array>>
 export declare const encodeAnimation: (
-	width: number,
-	height: number,
-	hasAlpha: boolean,
-	frames: WebPAnimationFrame[]
+  width: number,
+  height: number,
+  hasAlpha: boolean,
+  frames: WebPAnimationFrame[]
 ) => Promise<Nullable<Uint8Array>>
 export declare const decoderVersion: () => Promise<string>
 export declare const decodeRGB: (data: Uint8Array) => Promise<Nullable<WebPDecodedImageData>>
 export declare const decodeRGBA: (data: Uint8Array) => Promise<Nullable<WebPDecodedImageData>>
+export declare const decodeAnimation: (
+  data: Uint8Array,
+  hasAlpha: boolean
+) => Promise<Nullable<DecodedWebPAnimationFrame[]>>

package/dist/types.d.ts

@@ -8,6 +8,11 @@ export interface WebPAnimationFrame {
 	duration: number
 }
 
+export interface DecodedWebPAnimationFrame extends WebPAnimationFrame {
+  width: number
+  height: number
+}
+
 export interface WebPDecodedImageData {
   width: number
   height: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wasm-webp",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -28,6 +28,7 @@
     "build-wasm:dev": "bash ./build.sh -dev",
     "build-wasm:esm": "bash ./build.sh -es6",
     "build-wasm:cjs": "bash ./build.sh",
+    "build": "npm run build:esm",
     "build:esm": "npm run build-wasm:esm && tsc -m ES6 --outDir ./dist/esm && cp -r src/*.d.ts dist",
     "build:cjs": "npm run build-wasm:cjs && tsc -m commonjs --outDir ./dist/cjs && cp -r src/*.d.ts dist",
     "test": "node --experimental-wasm-modules --experimental-vm-modules ./node_modules/jest/bin/jest.js",