GdiBitmap — JSplitter API

classWORKERCLONEABLETRANSFERABLE

Name	Type	Description
`arg`	`GdiBitmap`

Name	Type	Description
`alpha`	`number`	Valid values 0-255.

ApplyMask

js/foo_uie_jsplitter.js:6373

ApplyMask(img)

Changes will be saved in the current bitmap.

Parameters

Name	Type	Description
`img`	`GdiBitmap`

Example source

samples/basic/ApplyMask.jsopen source

methodWORKER

Name	Type	Description
`x`	`number`
`y`	`number`
`w`	`number`
`h`	`number`

CreateRawBitmap

js/foo_uie_jsplitter.js:6393

CreateRawBitmap()

Create a DDB bitmap from GdiBitmap, which is used in GdiDrawBitmap

Returns

GdiRawBitmap

methodWORKER

GetColourScheme

js/foo_uie_jsplitter.js:6401

GetColourScheme(max_count)

Returns up to max_count representative colours found in the image.
This is a legacy colour extraction method. For colour frequency information and more advanced clustering, use GetColourSchemeJSON or GetColourSchemeJSONV2.

Parameters

Name	Type	Description
`max_count`	`number`	maximum number of colours to return

Returns

Array<number>

methodWORKER

GetColourSchemeJSON

js/foo_uie_jsplitter.js:6413

GetColourSchemeJSON(max_count)

Extracts representative colours from the image using K-means clustering in the RGB colour space.
Returns a JSON array in string form so you need to use JSON.parse() on the result.
Each entry contains a colour and its relative frequency in the clustered image.
Uses a different method for calculating colours than GetColourScheme.
Image is automatically resized during processing for performance reasons so there's no need to resize before calling the method.

Parameters

Name	Type	Description
`max_count`	`number`	maximum number of colours to return

Returns

string

Example

// See docs\Helpers.js for "toRGB" function.
img = ... // use utils.GetAlbumArtV2 / gdi.Image / etc
colours = JSON.parse(img.GetColourSchemeJSON(5));
console.log(colours[0].col); // 4290772992
console.log(colours[0].freq); // 0.34
console.log(toRGB(colours[0].col)); // [192, 0, 0]

methodWORKER

GetColourSchemeJSONV2

js/foo_uie_jsplitter.js:6435

GetColourSchemeJSONV2(max_count, min_chroma)

Extracts representative colours from the image using K-means++ clustering in the Oklab colour space.
Returns a JSON array in string form so you need to use JSON.parse() on the result.
Each entry contains a colour and its relative frequency in the clustered image.
K-means++ initialization improves the distribution of the initial cluster centres, while Oklab provides a perceptually more uniform distance metric than RGB.
The optional min_chroma parameter limits the initial cluster centre selection to pixels with at least the specified Oklab chroma. It does not filter pixels or colours from the clustering result.

Parameters

Name	Type	Description
`max_count`	`number`	maximum number of colours to return
`min_chroma = 0.0`optional	`number`	minimum Oklab chroma for pixels used as initial cluster centres

Returns

string

Example

// See docs\Helpers.js for "toRGB" function.
img = ... // use utils.GetAlbumArtV2 / gdi.Image / etc
colours = JSON.parse(img.GetColourSchemeJSONV2(10, 0.02));
console.log(colours[0].col); // 4290772992
console.log(colours[0].freq); // 0.34
console.log(toRGB(colours[0].col)); // [192, 0, 0]

methodWORKER

GetGraphics

js/foo_uie_jsplitter.js:6499

GetGraphics()

Note: don't forget to use ReleaseGraphics after work on GdiGraphics is done!

Returns

GdiGraphics

methodWORKER

GetPixelData

js/foo_uie_jsplitter.js:6507

GetPixelData(format)

Extract raw pixels from bitmap as a byte array in specified pixel format

Parameters

Name	Type	Description
`format = "bgra32"`optional	`string`	Pixel format string (default: "bgra32") Supported formats: "bgra32" 32bpp BGRA "rgba32" 32bpp RGBA "bgr24" 24bpp BGR "rgb24" 24bpp RGB

Returns

Uint8Array —

null if was an error (for example, bitmap in unsupported format or unsupported format specified)

Example

const img = gdi.Image(`${fb.ComponentPath}\\samples\\d2d\\images\\Field.jpg`);

let imgPixelData = img.GetPixelData();

utils.WriteBinaryFile("D:\\Field.bin", imgPixelData);

let rData = utils.ReadBinaryFile("D:\\Field.bin");

let rImg = gdi.CreateImageFromPixelData(rData, 2208, 1242);

function on_paint(gr) {
    gr.DrawImage(rImg, 0, 0, img.Width, img.Height, 0, 0, img.Width, img.Height);
}

methodWORKER

GetThemeColourSchemeJSON

js/foo_uie_jsplitter.js:6459

GetThemeColourSchemeJSON(paletteSize)

Builds an image-derived UI colour scheme for styling interface surfaces, text and interaction states from the bitmap.

The image is analysed in OKLab using the same weighted K-means++ palette extraction as GetColourSchemeJSONV2.
The palette stage uses paletteSize centroids, after which colours are assigned to five semantic UI roles:
Background, Text, Playing background, Focus frame and Selection background.

The returned colours are unsigned 32-bit ARGB values.
Background and Text are opaque.
State colours may contain alpha and are intended to be composited over Background.
playingBackgroundColor contains the Playing accent RGB together with the recommended alpha for a background highlight.
The same RGB channels can also be used at full opacity for a solid Playing indicator.

* The algorithm favours a representative image colour family for Background, prefers light body text unless the selected surface requires dark text, and uses independent image colour families for interaction/state accents when suitable candidates are available.

Returns an empty object {} if a colour scheme cannot be generated.

Parameters

Name	Type	Description
`paletteSize = 15`optional	`number`	Palette size. Number of K-means++ colour centroids used as the input palette.

Returns

string —

JSON object string. Contains backgroundColor, textColor, playingBackgroundColor, focusFrameColor and selectionBackgroundColor.

Example

const colours = JSON.parse(image.GetThemeColourSchemeJSON());

if (Object.keys(colours).length) {
    const playingIndicatorColor =
        0xFF000000 | (colours.playingBackgroundColor & 0x00FFFFFF);

    console.log(colours.backgroundColor);
    console.log(colours.textColor);
    console.log(colours.playingBackgroundColor);
    console.log(playingIndicatorColor);
    console.log(colours.focusFrameColor);
    console.log(colours.selectionBackgroundColor);
}

Example source

samples/complete/theme colour scheme.jsopen source

methodWORKER

InvertColours

js/foo_uie_jsplitter.js:6535

InvertColours()

Inverts the colours in a bitmap, to create a negative image. i.e. White becomes black, black becomes white, etc.

Returns

GdiBitmap

methodWORKER

ReleaseGraphics

js/foo_uie_jsplitter.js:6543

ReleaseGraphics(gr)

Parameters

Name	Type	Description
`gr`	`GdiGraphics`

methodWORKER

Resize

js/foo_uie_jsplitter.js:6549

Resize(w, h, mode)

Parameters

Name	Type	Description
`w`	`number`
`h`	`number`
`mode = 0`optional	`number`	See InterpolationMode

Returns

GdiBitmap

methodWORKER

RotateFlip

js/foo_uie_jsplitter.js:6558

RotateFlip(mode)

Changes will be saved in the current bitmap.

Parameters

Name	Type	Description
`mode`	`number`	See RotateFlipType

methodWORKER

SaveAs

js/foo_uie_jsplitter.js:6566

SaveAs(path, format)

Saves the bitmap to an image file.

Relative filesystem paths are resolved as described in utils.ReadTextFile.

Parameters

Name	Type	Description
`path`	`string`	Absolute or script-relative file path including file extension. The parent folder must already exist.
`format = 'image/png'`optional	`string`	"image/png" "image/bmp" "image/jpeg" "image/gif" "image/tiff"

Returns

boolean

Example

let img = utils.GetAlbumArtEmbedded(fb.GetFocusItem().RawPath, 0);
if (img) {
    img.SaveAs("D:\\export.jpg", "image/jpeg");
}

methodWORKER

StackBlur

js/foo_uie_jsplitter.js:6589

StackBlur(radius)

Changes will be saved in the current bitmap.

Parameters

Name	Type	Description
`radius`	`number`	Valid values 2-254.

Examples

<caption>Blur image<caption>
// `samples/basic/StackBlur (image).js`

<caption>Blur text<caption>
// `samples/basic/StackBlur (text).js`