imagescript 1.2.8 → 1.2.15

package/bench/_.mjs

@@ -0,0 +1,166 @@
+// https://gist.github.com/evanwashere/7ee592870e46f80405b9776dcd56e1e8#file-bench-js
+
+const now = performance.now.bind(performance);
+
+function sort(a, b) {
+  if (a > b) return 1;
+  if (a < b) return -1;
+
+  return 0;
+};
+
+function stats(n, avg, min, max, jit, all) {
+  return {
+    min: Math.ceil(min * 1e6),
+    max: Math.ceil(max * 1e6),
+    avg: Math.ceil(avg / n * 1e6),
+    jit: jit.map(x => Math.ceil(x * 1e6)),
+    '50th': Math.ceil(1e6 * all[Math.ceil(n * (50 / 100)) - 1]),
+    '75th': Math.ceil(1e6 * all[Math.ceil(n * (75 / 100)) - 1]),
+    '99th': Math.ceil(1e6 * all[Math.ceil(n * (99 / 100)) - 1]),
+    '99.5th': Math.ceil(1e6 * all[Math.ceil(n * (99.5 / 100)) - 1]),
+    '99.9th': Math.ceil(1e6 * all[Math.ceil(n * (99.9 / 100)) - 1]),
+  };
+}
+
+export function sync(n, fn) {
+  let avg = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  const all = new Array(n);
+  const jit = new Array(10);
+
+  warmup: {
+    let offset = 0;
+    let iterations = 10;
+    while (iterations--) {
+      const t1 = now();
+
+      fn();
+      jit[offset++] = now() - t1;
+    }
+
+    iterations = 1e3 - 10;
+    while (iterations--) fn();
+  }
+
+  measure: {
+    let offset = 0;
+    let iterations = n;
+    while (iterations--) {
+      const t1 = now();
+
+      fn();
+      const t2 = now() - t1;
+      if (t2 < min) min = t2;
+      if (t2 > max) max = t2;
+      avg += (all[offset++] = t2);
+    }
+  }
+
+  all.sort(sort);
+  return stats(n, avg, min, max, jit, all);
+}
+
+export async function async(n, fn) {
+  let avg = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  const all = new Array(n);
+  const jit = new Array(10);
+
+  warmup: {
+    let offset = 0;
+    let iterations = 10;
+    while (iterations--) {
+      const t1 = now();
+
+      await fn();
+      jit[offset++] = now() - t1;
+    }
+
+    iterations = 1e3 - 10;
+    while (iterations--) await fn();
+  }
+
+  measure: {
+    let offset = 0;
+    let iterations = n;
+    while (iterations--) {
+      const t1 = now();
+
+      await fn();
+      const t2 = now() - t1;
+      if (t2 < min) min = t2;
+      if (t2 > max) max = t2;
+      avg += (all[offset++] = t2);
+    }
+  }
+
+  all.sort(sort);
+  return stats(n, avg, min, max, jit, all);
+}
+
+export function format({ results, title = '', unit = 'ns', percentiles = true }) {
+  const h = '─';
+  const v = '│';
+
+  let s = '';
+  unit = `${unit}/iter`;
+  const rk = Object.keys(results);
+  const rv = Object.values(results);
+  const ra = rv.map(x => x.avg.toLocaleString('en-us'));
+  const r50 = rv.map(x => x['50th'].toLocaleString('en-us'));
+  const r75 = rv.map(x => x['75th'].toLocaleString('en-us'));
+  const r99 = rv.map(x => x['99th'].toLocaleString('en-us'));
+  const r995 = rv.map(x => x['99.5th'].toLocaleString('en-us'));
+  const r999 = rv.map(x => x['99.9th'].toLocaleString('en-us'));
+  const rmm = rv.map(x => [x.min.toLocaleString('en-us'), x.max.toLocaleString('en-us')]);
+
+  const us = unit.length;
+  const rks = Math.max(...rk.map(x => x.length));
+  const ras = Math.max(...ra.map(x => x.length));
+  const r50s = Math.max(...r50.map(x => x.length));
+  const r75s = Math.max(...r75.map(x => x.length));
+  const r99s = Math.max(...r99.map(x => x.length));
+  const r995s = Math.max(...r995.map(x => x.length));
+  const r999s = Math.max(...r999.map(x => x.length));
+  const rmns = Math.max(...rmm.map(x => x[0].length));
+  const rmxs = Math.max(...rmm.map(x => x[1].length));
+
+  const bks = 1 + rks + 1;
+  const b50s = 1 + r50s + 1 + us + 1;
+  const b75s = 1 + r75s + 1 + us + 1;
+  const b99s = 1 + r99s + 1 + us + 1;
+  const b995s = 1 + r995s + 1 + us + 1;
+  const b999s = 1 + r999s + 1 + us + 1;
+  const bimms = 1 + rmns + 2 + rmxs + 1 + us + 1;
+  const bas = 1 + (ras + 1 + us) + 1 + bimms + 1;
+  const ls = 1 + bks + 1 + bas + 1 + b50s + 1 + b75s + 1 + b99s + 1 + b995s + 1 + b999s + 1;
+
+  if (!percentiles) s += title ? ` ${title}` : '';
+
+  else {
+    s += ' '.repeat(3 + bks + bas);
+    s += '┌' + h.repeat(ls - 4 - bks - bas) + '┐';
+    s += '\n' + ` ${title.padEnd(2 + bks + bas, ' ')}`;
+  }
+
+  if (percentiles) s += v
+    + '50th'.padEnd((b50s + 4) / 2, ' ').padStart(b50s, ' ') + v
+    + '75th'.padEnd((b75s + 4) / 2, ' ').padStart(b75s, ' ') + v
+    + '99th'.padEnd((b99s + 4) / 2, ' ').padStart(b99s, ' ') + v
+    + '99.5th'.padEnd((b995s + 6) / 2, ' ').padStart(b995s, ' ') + v
+    + '99.9th'.padEnd((b999s + 6) / 2, ' ').padStart(b999s, ' ') + v;
+
+  s += (title || percentiles ? '\n' : '') + '┌' + h.repeat(1 + bks + bas) + '┐' + (percentiles ? '├' + h.repeat(ls - 4 - bks - bas) + '┤' : '');
+
+  for (let i = 0; i < rk.length; i++) {
+    s += '\n' + v + ` ${rk[i].padEnd(rks, ' ')} ` + v + ` ${ra[i].padStart(ras, ' ')} ${unit} ${`(${rmm[i][0]}..${rmm[i][1]} ${unit})`.padStart(bimms, ' ')} ` + v
+    if (percentiles) s += v + ` ${r50[i].padStart(r50s, ' ')} ${unit} ` + v + ` ${r75[i].padStart(r75s, ' ')} ${unit} ` + v + ` ${r99[i].padStart(r99s, ' ')} ${unit} ` + v + ` ${r995[i].padStart(r995s, ' ')} ${unit} ` + v + ` ${r999[i].padStart(r999s, ' ')} ${unit} ` + v;
+  }
+
+  s += '\n' + '└' + h.repeat(1 + bks + bas) + '┘' + (percentiles ? '└' + h.repeat(ls - 4 - bks - bas) + '┘' : '');
+
+  return s;
+}

package/bench/all.mjs

@@ -0,0 +1,4 @@
+import './flip.mjs';
+import './blur.mjs';
+import './resize.mjs';
+import './overlay.mjs';

package/bench/blur.mjs

@@ -0,0 +1,59 @@
+import { sync, async, format } from './_.mjs';
+
+import jimp from 'jimp';
+import sharp from 'sharp';
+import v2 from '../v2/framebuffer.mjs';
+import * as imagers from '@evan/wasm/target/image/node.mjs';
+import * as v2_wasm from '@evan/wasm/target/imagescript/node.mjs';
+
+{
+  const rgba = new Uint8Array(4 * 256 * 256).map((_, i) => i % 256);
+
+  const images = {
+    v2: new v2(256, 256, rgba),
+    imagers: imagers.framebuffer.from(256, 256, rgba),
+    v2_wasm: () => v2_wasm.framebuffer.from(256, 256, rgba),
+    sharp: sharp(rgba, { raw: { width: 256, height: 256, channels: 4 } }),
+    jimp: await new Promise(r => new jimp({ width: 256, height: 256, data: rgba }, (_, i) => r(i))),
+  };
+
+  console.log(format({
+    percentiles: false,
+    title: 'blur (5.0f/256x256)',
+
+    results: {
+      jimp: sync(1e4, () => images.jimp.clone().blur(5)),
+      imagescript: sync(1e4, () => images.v2.clone().blur('gaussian')),
+      sharp: await async(1e4, () => images.sharp.clone().blur(5).toBuffer()),
+      'image-rs (wasm)': sync(1e4, () => imagers.blur(images.imagers, 5).drop()),
+      'imagescript-rs (wasm)': sync(1e4, () => { let i = images.v2_wasm(); v2_wasm.blur(i, 5); i.drop() }),
+    },
+  }));
+
+  images.imagers.drop();
+}
+
+{
+  const rgba = new Uint8Array(4 * 1024 * 1024).map((_, i) => i % 256);
+
+  const images = {
+    v2: new v2(1024, 1024, rgba),
+    imagers: imagers.framebuffer.from(1024, 1024, rgba),
+    v2_wasm: () => v2_wasm.framebuffer.from(1024, 1024, rgba),
+    sharp: sharp(rgba, { raw: { width: 1024, height: 1024, channels: 4 } }),
+    jimp: await new Promise(r => new jimp({ width: 1024, height: 1024, data: rgba }, (_, i) => r(i))),
+  };
+
+  console.log(format({
+    percentiles: false,
+    title: 'blur (5.0f/1024x1024)',
+
+    results: {
+      jimp: sync(1e4, () => images.jimp.clone().blur(5)),
+      imagescript: sync(1e4, () => images.v2.clone().blur('gaussian')),
+      sharp: await async(1e4, () => images.sharp.clone().blur(5).toBuffer()),
+      'image-rs (wasm)': sync(1e4, () => imagers.blur(images.imagers, 5).drop()),
+      'imagescript-rs (wasm)': sync(1e4, () => { let i = images.v2_wasm(); v2_wasm.blur(i, 5); i.drop() }),
+    },
+  }));
+}

package/bench/flip.mjs

@@ -0,0 +1,63 @@
+import { sync, async, format } from './_.mjs';
+
+import jimp from 'jimp';
+import sharp from 'sharp';
+import v2 from '../v2/framebuffer.mjs';
+import * as imagers from '@evan/wasm/target/image/node.mjs';
+import * as v2_wasm from '@evan/wasm/target/imagescript/node.mjs';
+
+{
+  const rgba = new Uint8Array(4 * 256 * 256).map((_, i) => i % 256);
+
+  const images = {
+    v2: new v2(256, 256, rgba),
+    imagers: imagers.framebuffer.from(256, 256, rgba),
+    v2_wasm: v2_wasm.framebuffer.from(256, 256, rgba),
+    sharp: sharp(rgba, { raw: { width: 256, height: 256, channels: 4 } }),
+    jimp: await new Promise(r => new jimp({ width: 256, height: 256, data: rgba }, (_, i) => r(i))),
+  };
+
+  console.log(format({
+    percentiles: false,
+    title: 'flip horizontal (256)',
+
+    results: {
+      jimp: sync(1e4, () => images.jimp.flip(true, false)),
+      imagescript: sync(1e4, () => images.v2.flip('horizontal')),
+      sharp: await async(1e4, () => images.sharp.flip().toBuffer()),
+      'image-rs (wasm)': sync(1e4, () => images.imagers.flip_horizontal()),
+      'imagescript-rs (wasm)': sync(1e4, () => v2_wasm.flip_horizontal(images.v2_wasm)),
+    },
+  }));
+
+  images.v2_wasm.drop();
+  images.imagers.drop();
+}
+
+{
+  const rgba = new Uint8Array(4 * 256 * 256).map((_, i) => i % 256);
+
+  const images = {
+    v2: new v2(256, 256, rgba),
+    imagers: imagers.framebuffer.from(256, 256, rgba),
+    v2_wasm: v2_wasm.framebuffer.from(256, 256, rgba),
+    sharp: sharp(rgba, { raw: { width: 256, height: 256, channels: 4 } }),
+    jimp: await new Promise(r => new jimp({ width: 256, height: 256, data: rgba }, (_, i) => r(i))),
+  };
+
+  console.log(format({
+    percentiles: false,
+    title: 'flip vertical (256)',
+
+    results: {
+      jimp: sync(1e4, () => images.jimp.flip(false, true)),
+      imagescript: sync(1e4, () => images.v2.flip('vertical')),
+      sharp: await async(1e4, () => images.sharp.flop().toBuffer()),
+      'image-rs (wasm)': sync(1e4, () => images.imagers.flip_vertical()),
+      'imagescript-rs (wasm)': sync(1e4, () => v2_wasm.flip_vertical(images.v2_wasm)),
+    },
+  }));
+
+  images.v2_wasm.drop();
+  images.imagers.drop();
+}

package/bench/overlay.mjs

@@ -0,0 +1,35 @@
+import { sync, async, format } from './_.mjs';
+
+import jimp from 'jimp';
+import sharp from 'sharp';
+import v2 from '../v2/framebuffer.mjs';
+import * as imagers from '@evan/wasm/target/image/node.mjs';
+import * as v2_wasm from '@evan/wasm/target/imagescript/node.mjs';
+
+{
+  const rgba = new Uint8Array(4 * 256 * 256).map((_, i) => i % 256);
+
+  const images = {
+    v2: new v2(256, 256, rgba),
+    imagers: imagers.framebuffer.from(256, 256, rgba),
+    v2_wasm: v2_wasm.framebuffer.from(256, 256, rgba),
+    sharp: sharp(rgba, { raw: { width: 256, height: 256, channels: 4 } }),
+    jimp: await new Promise(r => new jimp({ width: 256, height: 256, data: rgba }, (_, i) => r(i))),
+  };
+
+  console.log(format({
+    percentiles: false,
+    title: 'overlay(256x256)',
+
+    results: {
+      jimp: sync(1e4, () => images.jimp.composite(images.jimp, 0, 0)),
+      imagescript: sync(1e4, () => images.v2.overlay(images.v2, 0, 0)),
+      'image-rs (wasm)': sync(1e4, () => images.imagers.overlay(images.imagers, 0, 0)),
+      'imagescript-rs (wasm)': sync(1e4, () => v2_wasm.overlay(images.v2_wasm, images.v2_wasm, 0, 0)),
+      sharp: await async(1e4, () => images.sharp.composite([{ input: rgba, raw: { width: 256, height: 256, channels: 4 } }]).toBuffer()),
+    },
+  }));
+
+  images.v2_wasm.drop();
+  images.imagers.drop();
+}

package/bench/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "jimp": "^0.16.1",
+    "sharp": "^0.29.2",
+    "@evan/wasm": "^0.0.92"
+  }
+}

package/bench/readme.md

@@ -0,0 +1,64 @@
+these benchmarks are purely for v2 progress tracking
+
+`node all.mjs`
+```js
+ resize linear (256 -> 1024)
+┌─────────────────────────────────────────────────────────────────────────────┐
+│ imagescript           │ 19,503,902 ns/iter (18,861,626..27,912,168 ns/iter) │
+│ imagescript-rs (wasm) │ 17,713,101 ns/iter (17,476,625..23,760,793 ns/iter) │
+└─────────────────────────────────────────────────────────────────────────────┘
+ resize cubic (256 -> 1024)
+┌────────────────────────────────────────────────────────────────────────────────┐
+│ imagescript           │ 235,246,467 ns/iter (229,790,251..354,907,209 ns/iter) │
+│ sharp                 │  14,342,381 ns/iter   (10,830,958..39,727,583 ns/iter) │
+│ imagescript-rs (wasm) │  63,684,581 ns/iter   (62,884,708..75,180,751 ns/iter) │
+└────────────────────────────────────────────────────────────────────────────────┘
+ flip horizontal (256)
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│ jimp                  │  1,259,846 ns/iter       (1,209,542..2,151,208 ns/iter) │
+│ imagescript           │     26,333 ns/iter             (24,626..93,501 ns/iter) │
+│ sharp                 │ 24,134,341 ns/iter   (274,959..210,144,563,500 ns/iter) │
+│ image-rs (wasm)       │     43,797 ns/iter             (43,501..74,293 ns/iter) │
+│ imagescript-rs (wasm) │     14,309 ns/iter             (13,959..49,333 ns/iter) │
+└─────────────────────────────────────────────────────────────────────────────────┘
+ flip vertical (256)
+┌───────────────────────────────────────────────────────────────────────────┐
+│ jimp                  │ 1,281,557 ns/iter  (1,223,292..7,604,917 ns/iter) │
+│ imagescript           │    54,151 ns/iter        (53,333..89,959 ns/iter) │
+│ sharp                 │ 2,552,946 ns/iter   (513,959..10,188,876 ns/iter) │
+│ image-rs (wasm)       │    30,475 ns/iter        (30,167..88,250 ns/iter) │
+│ imagescript-rs (wasm) │    13,747 ns/iter        (13,542..27,042 ns/iter) │
+└───────────────────────────────────────────────────────────────────────────┘
+ overlay(256x256)
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│ jimp                  │  3,428,386 ns/iter       (3,372,335..5,125,459 ns/iter) │
+│ imagescript           │    259,099 ns/iter           (256,583..310,334 ns/iter) │
+│ image-rs (wasm)       │    541,678 ns/iter         (533,166..1,509,710 ns/iter) │
+│ imagescript-rs (wasm) │    143,653 ns/iter         (137,293..1,242,793 ns/iter) │
+│ sharp                 │ 28,689,423 ns/iter (1,837,000..210,144,590,042 ns/iter) │
+└─────────────────────────────────────────────────────────────────────────────────┘
+ resize nearest (256 -> 1024)
+┌───────────────────────────────────────────────────────────────────────────────┐
+│ imagescript           │ 1,452,792 ns/iter     (1,327,334..13,043,958 ns/iter) │
+│ jimp                  │ 6,053,008 ns/iter      (5,835,042..9,540,835 ns/iter) │
+│ sharp                 │ 6,209,299 ns/iter (2,089,376..15,344,367,876 ns/iter) │
+│ image-rs (wasm)       │ 4,823,582 ns/iter      (4,809,042..7,176,000 ns/iter) │
+│ imagescript-rs (wasm) │   600,103 ns/iter          (597,042..802,751 ns/iter) │
+└───────────────────────────────────────────────────────────────────────────────┘
+ blur (5.0f/256x256)
+┌─────────────────────────────────────────────────────────────────────────────────┐
+│ jimp                  │  3,752,613 ns/iter      (3,338,751..17,802,125 ns/iter) │
+│ imagescript           │  1,982,010 ns/iter       (1,935,459..2,907,833 ns/iter) │
+│ sharp                 │ 36,079,515 ns/iter (2,465,000..210,155,512,001 ns/iter) │
+│ image-rs (wasm)       │  6,050,020 ns/iter       (6,037,125..8,032,876 ns/iter) │
+│ imagescript-rs (wasm) │  1,288,080 ns/iter       (1,263,834..1,699,542 ns/iter) │
+└─────────────────────────────────────────────────────────────────────────────────┘
+ blur (5.0f/1024x1024)
+┌───────────────────────────────────────────────────────────────────────────────┐
+│ jimp                  │ 105,250,057 ns/iter (89,942,042..302,817,625 ns/iter) │
+│ imagescript           │  31,996,324 ns/iter (31,372,417..101,801,209 ns/iter) │
+│ sharp                 │  20,019,663 ns/iter  (18,547,168..66,675,542 ns/iter) │
+│ image-rs (wasm)       │  97,924,025 ns/iter (96,879,584..158,598,250 ns/iter) │
+│ imagescript-rs (wasm) │  20,960,014 ns/iter (20,533,709..104,136,960 ns/iter) │
+└───────────────────────────────────────────────────────────────────────────────┘
+```

package/bench/resize.mjs

@@ -0,0 +1,52 @@
+import { sync, async, format } from './_.mjs';
+
+import jimp from 'jimp';
+import sharp from 'sharp';
+import v2 from '../v2/framebuffer.mjs';
+import * as imagers from '@evan/wasm/target/image/node.mjs';
+import * as v2_wasm from '@evan/wasm/target/imagescript/node.mjs';
+const rgba = new Uint8Array(4 * 256 * 256).map((_, i) => i % 256);
+
+const images = {
+  v2: () => new v2(256, 256, rgba),
+  v2_wasm: v2_wasm.framebuffer.from(256, 256, rgba),
+  imagers: imagers.framebuffer.from(256, 256, rgba),
+  sharp: sharp(rgba, { raw: { width: 256, height: 256, channels: 4 } }),
+  jimp: await new Promise(r => new jimp({ width: 256, height: 256, data: rgba }, (_, i) => r(i))),
+};
+
+console.log(format({
+  percentiles: false,
+  title: 'resize linear (256 -> 1024)',
+
+  results: {
+    // others don't have linear
+    imagescript: sync(1e3, () => images.v2().resize('linear', 1024, 1024)),
+    'imagescript-rs (wasm)': sync(1e3, () => v2_wasm.resize(images.v2_wasm, 'linear', 1024, 1024).drop()),
+  },
+}));
+
+console.log(format({
+  percentiles: false,
+  title: 'resize cubic (256 -> 1024)',
+
+  results: {
+    // others don't have cubic
+    imagescript: sync(1e3, () => images.v2().resize('cubic', 1024, 1024)),
+    sharp: await async(1e3, () => images.sharp.resize(1024, 1024, { kernel: 'cubic' }).toBuffer()),
+    'imagescript-rs (wasm)': sync(1e3, () => v2_wasm.resize(images.v2_wasm, 'cubic', 1024, 1024).drop()),
+  },
+}));
+
+console.log(format({
+  percentiles: false,
+  title: 'resize nearest (256 -> 1024)',
+
+  results: {
+    imagescript: sync(1e4, () => images.v2().resize('nearest', 1024, 1024)),
+    jimp: sync(1e4, () => images.jimp.resize(1024, 1024, jimp.RESIZE_NEAREST_NEIGHBOR)),
+    sharp: await async(1e4, () => images.sharp.resize(1024, 1024, { kernel: 'nearest' }).toBuffer()),
+    'image-rs (wasm)': sync(1e4, () => imagers.resize(images.imagers, 'nearest', 1024, 1024).drop()),
+    'imagescript-rs (wasm)': sync(1e4, () => v2_wasm.resize(images.v2_wasm, 'nearest', 1024, 1024).drop()),
+  },
+}));

package/codecs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present matmen, evanwashere
+
+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/codecs/lib.d.ts

@@ -0,0 +1,50 @@
+declare module '@imagescript/codecs' {
+  type wah = { width: number, height: number };
+  type jpeg_encode_options = wah & { quality?: number };
+  type webp_encode_options = wah & { quality?: number };
+
+  type png_encode_options = wah & {
+    compression?: 'fast' | 'best' | 'default',
+    filter?: 'up' | 'sub' | 'none' | 'paeth' | 'average',
+  };
+
+  type gif_frame_options = wah & {
+    x?: number,
+    y?: number,
+    delay?: number,
+    speed?: number,
+    colors?: number,
+    quality?: number,
+    dispose?: 'any' | 'keep' | 'previous' | 'background',
+  }
+
+
+  class gif_encoder {
+    width: number;
+    height: number;
+
+    constructor(width: number, height: number): this;
+    add(buffer: ArrayBufferView, options: gif_frame_options): void;
+    finish(options: { repeat?: number, comment: string, application?: string }): Uint8Array;
+  }
+
+
+  export interface gif {
+    encoder: gif_encoder,
+  }
+
+  export interface png {
+    encode(buffer: ArrayBufferView, options: png_encode_options): Uint8Array,
+    encode_async(buffer: ArrayBufferView, options: png_encode_options): Promise<Uint8Array>,
+  }
+
+  export interface jpeg {
+    encode(buffer: ArrayBufferView, options: png_encode_options): Uint8Array,
+    encode_async(buffer: ArrayBufferView, options: png_encode_options): Promise<Uint8Array>,
+  }
+
+  export interface webp {
+    encode(buffer: ArrayBufferView, options: png_encode_options): Uint8Array,
+    encode_async(buffer: ArrayBufferView, options: png_encode_options): Promise<Uint8Array>,
+  }
+}

package/codecs/lib.js

@@ -0,0 +1,6 @@
+let codecs;
+
+if (process.env.CODECS_FORCE_WASM) codecs = require('./wasm/index.js');
+else try { codecs = require('./node/index.js'); } catch { codecs = require('./wasm/index.js'); }
+
+throw new Error('todo!');

package/codecs/lib.mjs

@@ -0,0 +1 @@
+import lib from './lib.js';

package/codecs/node/index.js

@@ -0,0 +1,3 @@
+const { arch, platform } = require('os');
+try { module.exports = require(`./bin/${arch()}-${platform()}.node`); }
+catch (err) { throw new Error('unsupported arch/platform: ' + err.message); }

package/codecs/node/index.mjs

@@ -0,0 +1,6 @@
+import lib from './index.js';
+
+export const png = lib.png;
+export const gif = lib.gif;
+export const jpeg = lib.jpeg;
+export const webp = lib.webp;

package/codecs/package.json

@@ -0,0 +1,14 @@
+{
+  "license": "MIT",
+  "main": "lib.js",
+  "version": "0.0.1",
+  "types": "lib.d.ts",
+  "name": "@imagescript/codecs",
+  "description": "fast codecs bindings for node and browsers",
+  "author": "imagescript (https://github.com/matmen/imagescript)",
+  "bugs": { "url": "https://github.com/matmen/imagescript/issues" },
+  "homepage": "https://github.com/matmen/ImageScript/blob/master/codecs/readme.md",
+  "repository": { "type": "git", "url": "git+https://github.com/matmen/imagescript.git" },
+  "exports": { ".": [{ "import": "./lib.mjs", "require": "./lib.js" }, "./lib.js"], "./*": "./*" },
+  "keywords": ["png", "jpg", "gif", "jpeg", "webp", "fast", "wasm", "codecs", "native", "bindings"]
+}

package/codecs/readme.md

@@ -0,0 +1,38 @@
+# fast codecs bindings for node and browsers
+
+`npm i @imagescript/codecs`
+
+```js
+import { png } from '@imagescript/codecs';
+
+const rgba = new Uint32Array(256 * 256);
+const image = png.encode(rgba, { width: 256, height: 256 });
+```
+
+## supported platforms
+|                  | node@10 | node@12 | node@14 | node@16 |
+| ---------------- | ------- | ------- | ------- | ------- |
+| wasm32           | ✕       | ✕       | ✕       | ✕       |
+| macos x64        | ✓       | ✓       | ✓       | ✓       |
+| macos arm64      | ✓       | ✓       | ✓       | ✓       |
+| windows x64      | ✓       | ✓       | ✓       | ✓       |
+| linux x64 gnu    | ✓       | ✓       | ✓       | ✓       |
+| linux arm64 gnu  | ✓       | ✓       | ✓       | ✓       |
+
+you can force usage of wasm by setting `CODECS_FORCE_WASM` env variable
+
+for deno and browsers use `@imagescript/codecs/wasm/bundle/browser.js` [cdn](https://unpkg.com/@imagescript/codecs/wasm/bundle/browser.js)
+
+## benchmarks
+
+image used for benchmarks: `new framebuffer(width, height).fill((x, y) => x * y)`
+
+![benchmark](https://plot.evan.lol/bar/eyJ0aXRsZSI6IkdJRiBvcHMvcyAoaGlnaGVyIGlzIGJldHRlcikiLCJwb2ludHMiOlt7Im5hbWUiOiJlbmNvZGUoNXggUkdCQSAyNTZ4MjU2KSIsInNjb3JlcyI6WzE0LjU2LDIuMzZdfSx7Im5hbWUiOiJlbmNvZGUoNXggUkdCQSAxMDI0eDEwMjQpIiwic2NvcmVzIjpbMC43MywwLjIxXX1dLCJsZWdlbmQiOlt7Im5hbWUiOiJuYXRpdmUoQGltYWdlc2NyaXB0L2NvZGVjcykiLCJjb2xvciI6ODUxMTM4MDQ3fSx7Im5hbWUiOiJqcyhAc2t5cmEvZ2lmZW5jKSIsImNvbG9yIjotMTI1MDk3MjY3M31dfQ==.png)
+
+![benchmark](https://plot.evan.lol/bar/eyJ0aXRsZSI6IkpQRUcgb3BzL3MgKGhpZ2hlciBpcyBiZXR0ZXIpIiwicG9pbnRzIjpbeyJuYW1lIjoiZW5jb2RlKFJHQkEgNjR4NjQpIiwic2NvcmVzIjpbNDMuNTgsNTcyOS4wOCw4MTEuMjldfSx7Im5hbWUiOiJlbmNvZGUoUkdCQSAyNTZ4MjU2KSIsInNjb3JlcyI6WzMyLjQ0LDM2NS45MywyMjguN119LHsibmFtZSI6ImVuY29kZShSR0JBIDUxMng1MTIpIiwic2NvcmVzIjpbMTYuMjIsODIuOTgsNzkuMjddfSx7Im5hbWUiOiJlbmNvZGUoUkdCQSAxMDI0eDEwMjQpIiwic2NvcmVzIjpbNC4yMiwxOS4xNiwyMi43OV19LHsibmFtZSI6ImVuY29kZShSR0JBIDIwNDh4MjA0OCkiLCJzY29yZXMiOlsxLjA1LDQuODksNS42N119XSwibGVnZW5kIjpbeyJuYW1lIjoianMoanBlZy1qcykiLCJjb2xvciI6ODUxMTM4MDQ3fSx7Im5hbWUiOiJuYXRpdmUoQGltYWdlc2NyaXB0L2NvZGVjcykiLCJjb2xvciI6LTEyNTA5NzI2NzN9LHsibmFtZSI6Im5hdGl2ZShzaGFycCkiLCJjb2xvciI6LTExNTY1MDA0ODF9XX0=.png)
+
+![benchmark](https://plot.evan.lol/bar/eyJ0aXRsZSI6IlBORyBvcHMvcyAoaGlnaGVyIGlzIGJldHRlcikiLCJwb2ludHMiOlt7Im5hbWUiOiJlbmNvZGUoUkdCQSA2NHg2NCkiLCJzY29yZXMiOlsyNDAuNzEsMTQzNy44Nyw2OTAuOTQsNzY2LjA1XX0seyJuYW1lIjoiZW5jb2RlKFJHQkEgMjU2eDI1NikiLCJzY29yZXMiOlsxMi43OSw1Ni4yOCwzMS41MywxMTIuNDZdfSx7Im5hbWUiOiJlbmNvZGUoUkdCQSA1MTJ4NTEyKSIsInNjb3JlcyI6WzkuOTQsMjUuODMsMTAuMzEsMzQuODZdfSx7Im5hbWUiOiJlbmNvZGUoUkdCQSAxMDI0eDEwMjQpIiwic2NvcmVzIjpbMy4wNCw3LDMuMzcsMTAuMzddfSx7Im5hbWUiOiJlbmNvZGUoUkdCQSAyMDQ4eDIwNDgpIiwic2NvcmVzIjpbMC44LDEuNzYsMC45NywyLjddfV0sImxlZ2VuZCI6W3sibmFtZSI6ImpzKHVwbmcpIiwiY29sb3IiOjg1MTEzODA0N30seyJuYW1lIjoibmF0aXZlKEBpbWFnZXNjcmlwdC9jb2RlY3MpIiwiY29sb3IiOi0xMjUwOTcyNjczfSx7Im5hbWUiOiJqcyhpbWFnZXNjcmlwdCkiLCJjb2xvciI6LTExNTY1MDA0ODF9LHsibmFtZSI6Im5hdGl2ZShzaGFycCkiLCJjb2xvciI6LTE0MTI4NzE2OX1dfQ==.png)
+
+## License
+
+MIT © [evan](https://github.com/evanwashere) [matmen](https://github.com/matmen)