import * as pix from "@thi.ng/pixel";

// init 32bit packed ARGB pixel buffer from image (resized to 256x256)
pix.ARGBBuffer.fromImagePromise(pix.imagePromise("foo.jpg"), 256, 256).then((buf) => {
    // extract sub-image
    const region = buf.getRegion(32, 96, 128, 64);
    // copy region back at new position
    region.blit(buf, 96, 32);

    // create html canvas
    const ctx = pix.canvas2d(buf.width * 3, buf.height);

    // write pixel buffer to canvas
    buf.blitCanvas(ctx.canvas);

    // manipulate single color channel with dot pattern
    const id = pix.Channel.RED;
    const ch = buf.getChannel(id).invert();
    for (let y = 0; y < ch.height; y += 2) {
        for (let x = (y >> 1) & 1; x < ch.width; x += 2) {
            ch.setAt(x, y, 0xff);
        }
    }
    // replace original channel
    buf.setChannel(id, ch);
    // write pixel buffer
    buf.blitCanvas(ctx.canvas, buf.width, 0);
    // create & write grayscale version (uint8 buffer)
    buf.grayscale().blitCanvas(ctx.canvas, buf.width * 2, 0);

    document.body.appendChild(ctx.canvas);
});