Quite-OK Image format encoder/decoder in vanilla JavaScript.
MIT License
"Quite-OK Image format" encoder/decoder in vanilla javascript.
With npm do:
npm install qoijs
With yarn do:
yarn add qoijs
A compiled version for web browsers is also available on a CDN:
<script src="https://cdn.jsdelivr.net/gh/kchapelier/[email protected]/build/qoijs.min.js"></script>
decode(arrayBuffer[, byteOffset[, byteLength[, outputChannels]]])
Decode a QOI file given as an ArrayBuffer.
Returns a literal containing the color data as a TypedArray and all the metadata of the image.
const QOI = require('qoijs');
// using fs in node to read the content of a file as a Buffer
const buffer = require('fs').readFileSync('some_image.qoi');
const decodedData = QOI.decode(buffer.buffer, buffer.byteOffset, buffer.byteLength);
// using FileReader to read a file retrieved from a drop event as an ArrayBuffer
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onloadend = function () {
const arrayBuffer = reader.result;
const decodedData = QOI.decode(arrayBuffer);
};
encode(colorData, description)
Encode a QOI file.
Returns an ArrayBuffer containing the QOI file content.
const QOI = require('qoijs');
// encode a 2x2 b/w checkerboard pattern from an arbitrary colorData array
const colorData = new Uint8Array([0,0,0,255, 255,255,255,255, 255,255,255,255, 0,0,0,0]);
const arrayBuffer = QOI.encode(colorData, {
width: 2,
height: 2,
channels: 4,
colorspace: 0
});
// encode the content of a 2D canvas (ImageData)
const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
const arrayBuffer = QOI.encode(imageData.data, {
width: imageData.width,
height: imageData.height,
channels: 4,
colorspace: 0
});
For new features and other enhancements, please make sure to contact me beforehand, either on Twitter or through an issue on Github.
MIT