xj
xbr-js
npm i xbr-js
xj

xbr-js

JS implementation of the xBR image scaler

by Josep del Rio

2.0.1 (see all)License:MITTypeScript:Not Found
npm i xbr-js
Readme

xBRjs

NPM Version

JS implementation of the xBR image scaling algorytm by Hyllian.

Installation

# npm
npm install xbr-js --save

# yarn
yarn add xbr-js

Usage

import {xbr2x, xbr3x, xbr4x} from 'xbr-js';
// if you have an <img>, draw it on a canvas first
const canvas = document.createElement('canvas');
const sourceWidth = canvas.width = img.width;
const sourceHeight = canvas.height = img.height;
const context = canvas.getContext('2d');
context.drawImage(img, 0, 0);

// the following code will apply xbr2x to an existing canvas
canvas.width = sourceWidth * 2;
canvas.height = sourceHeight * 2;

const originalImageData = context.getImageData(0, 0, sourceWidth, sourceHeight);
const originalPixelView = new Uint32Array(originalImageData.data.buffer);
const scaledPixelView = xbr2x(originalPixelView, sourceWidth, sourceHeight);
const scaledImageData = context.createImageData(canvas.width, canvas.height);
scaledImageData.data.set(new Uint8ClampedArray(scaledPixelView.buffer));

context.putImageData(scaledImageData, 0, 0);

API

xbr2x([array], [width], [height], [options]) ⇒ Uint32Array

Returns a typed array with the pixels that form the scaled image.

ParamTypeDescription
arrayUint32ArrayThe input pixels in ARGB format
widthnumberThe width of the original image
heightnumberThe height of the original image
[options.blendColors]booleanDetermines if new colors will be created. Defaults to true.
[options.scaleAlpha]booleanDetermines whether to upscale the alpha channel using the xBR algorythm. Defaults to false.

Demo

Check it out here.

Downloads/wk

13

GitHub Stars

20

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

2

OPEN PRs

0
VersionTagPublished
2.0.1
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial