wasm-webp 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 nieyuyao0826@hotmail.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,239 @@
+# WIP
+
+# `webp.wasm`
+
+webp.wasm is a pure Webassembly / Javascript port of libwebp.
+
+![CI](https://github.com/nieyuyao/webp-wasm/workflows/CI/badge.svg)
+
+## APIs
+
+### Encode
+
+#### encode
+
+Get encoder encoderVersion.
+
+`function encoderVersion(): Promise<string>`
+
+##### Example
+
+```javascript
+const version = await encoderVersion()
+console.log(version) // 1.3.2
+```
+
+#### encodeRGB
+
+Encodes rgb bitmap an returns WebP Uint8Array. The `width` and `height` parameters of the bitmap should be provided.
+
+`function encodeRGB(rgb: Uint8Array, width: number, height: number, quality?: number): Promise<Nullable<Uint8Array>>`
+
+##### Example
+
+```javascript
+...
+const ctx = canvas.getContext('2d')!
+const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+const buf = new Uint8Array(3 * canvas.width, canvas.height) 
+let j = 0
+// remove alpha
+imgData.data.forEach((pixel, i) => {
+  if ((i + 1) % 4 === 0) {
+    return
+  }
+  buf[j] = pixel
+  j++
+})
+const webpData = await encodeRGB(buf, canvas.width, canvas.height)
+const blob = new Blob([webpData!], {type: 'image/webp'})
+const blobURL = URL.createObjectURL(blob);
+// download webp
+const a = document.createElement('a')
+a.download = '1.webp'
+a.href = blobURL
+document.body.appendChild(a)
+a.click()
+a.remove()
+```
+
+#### encodeRGBA
+
+Encodes rgba bitmap an returns WebP Uint8Array.
+
+`function encodeRGBA(rgba: Uint8Array, width: number, height: number, quality?: number): Promise<Nullable<Uint8Array>>`
+
+##### Example
+
+```javascript
+...
+const ctx = canvas.getContext('2d')!
+const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+const webpData = await encodeRGBA(imgData.data, canvas.width, canvas.height)
+// download webp
+...
+```
+
+#### 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
+
+Whether to include alpha chanel.
+
+- WebPConfig.lossless: number
+
+Lossless encoding (0=lossy(default), 1=lossless).
+
+- WebPConfig.quality: number
+
+Between 0 and 100. Default value is 100.
+
+##### Example
+
+```javascript
+...
+const ctx = canvas.getContext('2d')!
+const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+const webpData = await encode(imgData.data, canvas.width, canvas.height, true, { lossless: 0 })
+// download webp
+...
+```
+
+#### encodeAnimation
+
+Returns animated WebP like `GIF`.
+
+`function encodeAnimation(width: number, height: number, hasAlpha: boolean, frames: WebPAnimationFrame[]): Promise<Nullable<Uint8Array>>`
+
+- hasAlpha: boolean
+
+Whether to include alpha chanel.
+
+The WebPAnimationFrame has follow properties:
+
+- WebPAnimationFrame.data: Uint8Array
+
+Frame bitmap.
+
+- WebPAnimationFrame.duration: number
+
+Duration of frame.
+
+##### Example
+
+```javascript
+...
+// record each frame
+frames.push({
+  data: ctx.getImageData(0, 0, 100, 100).data,
+  duration: 20
+})
+const webpData = await encodeAnimation(100, 100, true, frames)
+...
+// download webp
+```
+
+### Decode
+
+#### decoderVersion
+
+Get decoder version.
+
+`function decoderVersion(): Promise<string>`
+
+##### Example
+
+```javascript
+const version = await decoderVersion()
+console.log(version) // 1.3.2
+```
+
+#### decodeRGB
+
+Decodes webp and outputs `WebPDecodedImageData` contains rgb bitmap.
+
+`function decodeRGB(data: Uint8Array): Promise<Nullable<WebPDecodedImageData>>`
+
+##### Example
+
+```javascript
+...
+const fr = new FileReader()
+fr.onload = () => {
+  if (!fr.result) {
+    return
+  }
+  webpData = fr.result as Uint8Array
+  const result = await decodeRGB(webpData)
+  // draw imageData
+  const ctx = canvas.getContext('2d')!
+	ctx.clearRect(0, 0, canvas.width, canvas.height)
+	canvas.style.width = `${result.width}px`
+	canvas.style.height = `${result.height}px`
+	canvas.width = result.width
+	canvas.height = result.height
+	ctx.putImageData(result, 0, 0)
+}
+// read webp file
+fr.readAsArrayBuffer(file)
+...
+```
+
+#### decodeRGBA
+
+Decodes webp and outputs `WebPDecodedImageData` contains rgba bitmap.
+
+`function decodeRGB(data: Uint8Array): Promise<Nullable<WebPDecodedImageData>>`
+
+##### 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)
+...
+```
+
+#### WebPDecodedImageData
+
+The object have the following properties:
+
+- WebPDecodedImageData.width: number
+
+The image width in pixels.
+
+- WebPDecodedImageData.height: number
+
+The image height in pixels.
+
+- 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.
+
+## Playing Examples
+
+```shell
+npm run dev
+```
+
+## Building
+
+```shell
+npm run build
+```

package/dist/cjs/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+// @ts-ignore
+const webp_wasm_1 = __importDefault(require("./webp-wasm"));
+// default webp config
+const defaultWebpConfig = {
+    lossless: 0,
+    quality: 100,
+};
+const encoderVersion = () => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    return module.encoder_version();
+});
+exports.encoderVersion = encoderVersion;
+const encodeRGB = (rgb, width, height, quality) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    quality = typeof quality !== 'number' ? 100 : Math.min(Math.max(0, quality));
+    return module.encodeRGB(rgb, width, height, quality);
+});
+exports.encodeRGB = encodeRGB;
+const encodeRGBA = (rgba, width, height, quality) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    quality = typeof quality !== 'number' ? 100 : Math.min(Math.max(0, quality));
+    return module.encodeRGBA(rgba, width, height, quality);
+});
+exports.encodeRGBA = encodeRGBA;
+const encode = (data, width, height, hasAlpha, config) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    const webpConfig = Object.assign(Object.assign({}, defaultWebpConfig), config);
+    return module.encode(data, width, height, hasAlpha, webpConfig);
+});
+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 Uint8ClampedArray(dataLength);
+    let offset = 0;
+    frames.forEach(frame => {
+        data.set(frame.data, offset);
+        offset += frame.data.length;
+        durations.push(frame.duration);
+    });
+    return module.encodeAnimation(width, height, hasAlpha, durations, data);
+});
+exports.encodeAnimation = encodeAnimation;
+const decoderVersion = () => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    return module.decoder_version();
+});
+exports.decoderVersion = decoderVersion;
+const decodeRGB = (rgb) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    return module.decodeRGB(rgb);
+});
+exports.decodeRGB = decodeRGB;
+const decodeRGBA = (rgba) => __awaiter(void 0, void 0, void 0, function* () {
+    const module = yield (0, webp_wasm_1.default)();
+    return module.decodeRGBA(rgba);
+});
+exports.decodeRGBA = decodeRGBA;
+// TODO:
+// export const decode = async (data: Uint8ClampedArray, hasAlpha: boolean) => {
+// 	const module = await Module()
+// 	return module.decode(data, hasAlpha)
+// }