Skip to content

Instantly share code, notes, and snippets.

@mattdesl

mattdesl/bitmap-display-p3.js

Created June 30, 2024 17:19
Show Gist options
  • Save mattdesl/372b71865853e72854ad8e3d6bfd8882 to your computer and use it in GitHub Desktop.
Save mattdesl/372b71865853e72854ad8e3d6bfd8882 to your computer and use it in GitHub Desktop.
Download ZIP
Draw Uint8Array Display-P3 RGBA data to canvas
Raw
bitmap-display-p3.js
import {
ChunkType,
ColorType,
colorTypeToChannels,
encode,
encode_iCCP,
} from "png-tools";
import { deflate } from "pako";
...
const outProfileBuffer = await (await fetch(DISPLAY_P3_ICC_URL)).arrayBuffer();
const outProfileCompressed = deflate(outProfileBuffer);
const iCCP = {
type: ChunkType.iCCP,
data: encode_iCCP({ name: "Display P3", data: outProfileCompressed }),
};
const png = encode(
{
data: rgba,
depth: 8,
colorType: ColorType.RGBA,
width,
height,
ancillary: [iCCP],
},
deflate,
{ level: 3 }
);
const bitmap = await createImageBitmap(
new Blob([png], { type: "image/png" })
);
// draw to canvas
context.drawImage(bitmap, 0, 0);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment