@oliverphaser/nativescript-bitmap-factory
Advanced tools
A NativeScript module for creating and manipulating bitmap images. Forked from mkloubert and updated for NativeScript 8 with fixed iOS crop bug.
A NativeScript module for creating and manipulating bitmap images.
This will work only on NativeScript 8.
The originial module is part of nativescript-toolbox.
ns plugin add @oliverphaser/nativescript-bitmap-factory
import BitmapFactory = require("@oliverphaser/nativescript-bitmap-factory");
import KnownColors = require("@nativescript/core/color/known-colors");
// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);
// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
// draw an oval with a size of 300x150
// and start at position x=0, y=75
// and use
// "red" as border color and "black" as background color.
bmp.drawOval("300x150", "0,75",
KnownColors.Red, KnownColors.Black);
// draw a circle with a radius of 80
// at the center of the bitmap (null => default)
// and use
// "dark green" as border color
bmp.drawCircle(80, null,
KnownColors.DarkGreen);
// draws an arc with a size of 100x200
// at x=10 and y=20
// beginning at angle 0 with a sweep angle of 90 degrees
// and a black border and a yellow fill color
bmp.drawArc("100x200", "10,20",
0, 90,
KnownColors.Black, KnownColors.Yellow);
// set a yellow point at x=160, y=150
bmp.setPoint("160,150", "ff0");
// draws a line from (0|150) to (300|75)
// with blue color
bmp.drawLine("0,150", "300,75", '#0000ff');
// writes a text in yellow color
// at x=100, y=100
// by using "Roboto" as font
// with a size of 10
bmp.writeText("This is a test!", "100,100", {
color: KnownColors.Yellow,
size: 10,
name: "Roboto"
});
// returns the current bitmap as data URL
// which can be used as ImageSource
// in JPEG format with a quality of 75%
var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
// ... and in Base64 format
var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
// ... and as ImageSource
var imgSrc = bmp.toImageSource();
});
| Name | Description |
|---|---|
| asBitmap | Returns a value as wrapped bitmap. |
| create | Creates a new bitmap instance. |
| getDefaultOptions | Returns the default options for creating a new bitmap. |
| makeMutable | A helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object. |
| setDefaultOptions | Sets the default options for creating a new bitmap. |
You can access the nativeObject property to access the platform specific object.
For Android this is a Bitmap object and for iOS this is an UIImage object.
To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.
You also can access the underlying Canvas object by __canvas property.
You also can access the underlying CGImage object by__CGImage property.
Stores data of an RGB value with alpha value.
These values can also be submitted as strings (like #ff0 or ffffff) or numbers.
interface IArgb {
/**
* Gets the alpha value.
*/
a: number;
/**
* Gets the red value.
*/
r: number;
/**
* Gets the green value.
*/
g: number;
/**
* Gets the blue value.
*/
b: number;
}
Used by toObject() method.
interface IBitmapData {
/**
* Gets the data as Base64 string.
*/
base64: string;
/**
* Gets the mime type.
*/
mime: string;
}
Font settings.
interface IFont {
/**
* Anti alias or not.
*/
antiAlias?: boolean;
/**
* Gets the custom forground color.
*/
color?: string | number | IArgb;
/**
* Gets the name.
*/
name?: string;
/**
* Gets the size.
*/
size?: number;
}
Coordinates, can also be a string like 0,0 or 150|300.
interface IPoint2D {
/**
* Gets the X coordinate.
*/
x: number;
/**
* Gets the Y coordinate.
*/
y: number;
}
Size, can also be a string like 0,0 or 150x300.
interface ISize {
/**
* Gets the height.
*/
height: number;
/**
* Gets the width.
*/
width: number;
}
Supported output formats.
enum OutputFormat {
/**
* PNG
*/
PNG = 1,
/**
* JPEG
*/
JPEG = 2,
}
interface IBitmap {
/**
* Get the android specific object provided by 'application' module.
*/
android: AndroidApplication;
/**
* Clones that bitmap.
*/
clone(): IBitmap;
/**
* Crops that bitmap and returns its copy.
*/
crop(leftTop?: IPoint2D | string,
size?: ISize | string): IBitmap;
/**
* Gets or sets the default color.
*/
defaultColor: IPoint2D | string | number;
/**
* Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
*/
dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
tag?: T): TResult;
/**
* Draws a circle.
*/
drawCircle(radius?: number,
center?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws an arc.
*/
drawArc(size?: ISize | string,
leftTop?: IPoint2D | string,
startAngle?: number,
sweepAngle?: number,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws a line.
*/
drawLine(start: IPoint2D | string, end: IPoint2D | string,
color?: string | number | IArgb): IBitmap;
/**
* Draws an oval circle.
*/
drawOval(size?: ISize | string,
leftTop?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws a rectangle.
*/
drawRect(size?: ISize | string,
leftTop?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Gets the color of a point.
*/
getPoint(coordinates?: IPoint2D | string): IArgb;
/**
* Gets the height of the bitmap.
*/
height: number;
/**
* Get the iOS specific object provided by 'application' module.
*/
ios: iOSApplication;
/**
* Inserts another image into that bitmap.
*/
insert(other: any,
leftTop?: IPoint2D | string): IBitmap;
/**
* Gets if the object has been disposed or not.
*/
isDisposed: boolean;
/**
* Gets the native platform specific object that represents that bitmap.
*/
nativeObject: any;
/**
* Normalizes a color value.
*/
normalizeColor(value: string | number | IArgb): IArgb;
/**
* Creates a copy of that bitmap with a new size.
*/
resize(newSize: ISize | string): IBitmap;
/**
* Resizes that image by defining a new height by keeping ratio.
*/
resizeHeight(newHeight: number): IBitmap;
/**
* Resizes that image by defining a new (maximum) size by keeping ratio.
*/
resizeMax(maxSize: number): IBitmap;
/**
* Resizes that image by defining a new width by keeping ratio.
*/
resizeWidth(newWidth: number): IBitmap;
/**
* Rotates the image.
*/
rotate(degrees?: number): IBitmap;
/**
* Sets a pixel / point.
*/
setPoint(coordinates?: IPoint2D | string,
color?: string | number | IArgb): IBitmap;
/**
* Gets the size.
*/
size: ISize;
/**
* Converts that image to a Base64 string.
*/
toBase64(format?: OutputFormat, quality?: number): string;
/**
* Converts that image to a data URL.
*/
toDataUrl(format?: OutputFormat, quality?: number): string;
/**
* Returns that image as ImageSource.
*/
toImageSource(): ImageSource;
/**
* Converts that image to an object.
*/
toObject(format?: OutputFormat, quality?: number): IBitmapData;
/**
* Writes a text.
*/
writeText(txt: any,
leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;
/**
* Gets the width of the bitmap.
*/
width: number;
}
A NativeScript module for creating and manipulating bitmap images.
This will work only on NativeScript 8.
The originial module is part of nativescript-toolbox.
ns plugin add @oliverphaser/nativescript-bitmap-factory
import BitmapFactory = require("@oliverphaser/nativescript-bitmap-factory");
import KnownColors = require("@nativescript/core/color/known-colors");
// create a bitmap with 640x480
var bmp = BitmapFactory.create(640, 480);
// work with bitmap and
// keep sure to free memory
// after we do not need it anymore
bmp.dispose(() => {
// draw an oval with a size of 300x150
// and start at position x=0, y=75
// and use
// "red" as border color and "black" as background color.
bmp.drawOval("300x150", "0,75",
KnownColors.Red, KnownColors.Black);
// draw a circle with a radius of 80
// at the center of the bitmap (null => default)
// and use
// "dark green" as border color
bmp.drawCircle(80, null,
KnownColors.DarkGreen);
// draws an arc with a size of 100x200
// at x=10 and y=20
// beginning at angle 0 with a sweep angle of 90 degrees
// and a black border and a yellow fill color
bmp.drawArc("100x200", "10,20",
0, 90,
KnownColors.Black, KnownColors.Yellow);
// set a yellow point at x=160, y=150
bmp.setPoint("160,150", "ff0");
// draws a line from (0|150) to (300|75)
// with blue color
bmp.drawLine("0,150", "300,75", '#0000ff');
// writes a text in yellow color
// at x=100, y=100
// by using "Roboto" as font
// with a size of 10
bmp.writeText("This is a test!", "100,100", {
color: KnownColors.Yellow,
size: 10,
name: "Roboto"
});
// returns the current bitmap as data URL
// which can be used as ImageSource
// in JPEG format with a quality of 75%
var data = bmp.toDataUrl(BitmapFactory.OutputFormat.JPEG, 75);
// ... and in Base64 format
var base64JPEG = bmp.toBase64(BitmapFactory.OutputFormat.JPEG, 75);
// ... and as ImageSource
var imgSrc = bmp.toImageSource();
});
| Name | Description |
|---|---|
| asBitmap | Returns a value as wrapped bitmap. |
| create | Creates a new bitmap instance. |
| getDefaultOptions | Returns the default options for creating a new bitmap. |
| makeMutable | A helper function that keeps sure to return a native image object that is able to be used as wrapped bitmap object. |
| setDefaultOptions | Sets the default options for creating a new bitmap. |
You can access the nativeObject property to access the platform specific object.
For Android this is a Bitmap object and for iOS this is an UIImage object.
To check the platform you can use the android and ios properties which have the same values as the corresponding properties from application core module.
You also can access the underlying Canvas object by __canvas property.
You also can access the underlying CGImage object by__CGImage property.
Stores data of an RGB value with alpha value.
These values can also be submitted as strings (like #ff0 or ffffff) or numbers.
interface IArgb {
/**
* Gets the alpha value.
*/
a: number;
/**
* Gets the red value.
*/
r: number;
/**
* Gets the green value.
*/
g: number;
/**
* Gets the blue value.
*/
b: number;
}
Used by toObject() method.
interface IBitmapData {
/**
* Gets the data as Base64 string.
*/
base64: string;
/**
* Gets the mime type.
*/
mime: string;
}
Font settings.
interface IFont {
/**
* Anti alias or not.
*/
antiAlias?: boolean;
/**
* Gets the custom forground color.
*/
color?: string | number | IArgb;
/**
* Gets the name.
*/
name?: string;
/**
* Gets the size.
*/
size?: number;
}
Coordinates, can also be a string like 0,0 or 150|300.
interface IPoint2D {
/**
* Gets the X coordinate.
*/
x: number;
/**
* Gets the Y coordinate.
*/
y: number;
}
Size, can also be a string like 0,0 or 150x300.
interface ISize {
/**
* Gets the height.
*/
height: number;
/**
* Gets the width.
*/
width: number;
}
Supported output formats.
enum OutputFormat {
/**
* PNG
*/
PNG = 1,
/**
* JPEG
*/
JPEG = 2,
}
interface IBitmap {
/**
* Get the android specific object provided by 'application' module.
*/
android: AndroidApplication;
/**
* Clones that bitmap.
*/
clone(): IBitmap;
/**
* Crops that bitmap and returns its copy.
*/
crop(leftTop?: IPoint2D | string,
size?: ISize | string): IBitmap;
/**
* Gets or sets the default color.
*/
defaultColor: IPoint2D | string | number;
/**
* Disposes the bitmap. Similar to the IDisposable pattern of .NET Framework.
*/
dispose<T, TResult>(action?: (bmp: IBitmap, tag?: T) => TResult,
tag?: T): TResult;
/**
* Draws a circle.
*/
drawCircle(radius?: number,
center?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws an arc.
*/
drawArc(size?: ISize | string,
leftTop?: IPoint2D | string,
startAngle?: number,
sweepAngle?: number,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws a line.
*/
drawLine(start: IPoint2D | string, end: IPoint2D | string,
color?: string | number | IArgb): IBitmap;
/**
* Draws an oval circle.
*/
drawOval(size?: ISize | string,
leftTop?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Draws a rectangle.
*/
drawRect(size?: ISize | string,
leftTop?: IPoint2D | string,
color?: string | number | IArgb, fillColor?: string | number | IArgb): IBitmap;
/**
* Gets the color of a point.
*/
getPoint(coordinates?: IPoint2D | string): IArgb;
/**
* Gets the height of the bitmap.
*/
height: number;
/**
* Get the iOS specific object provided by 'application' module.
*/
ios: iOSApplication;
/**
* Inserts another image into that bitmap.
*/
insert(other: any,
leftTop?: IPoint2D | string): IBitmap;
/**
* Gets if the object has been disposed or not.
*/
isDisposed: boolean;
/**
* Gets the native platform specific object that represents that bitmap.
*/
nativeObject: any;
/**
* Normalizes a color value.
*/
normalizeColor(value: string | number | IArgb): IArgb;
/**
* Creates a copy of that bitmap with a new size.
*/
resize(newSize: ISize | string): IBitmap;
/**
* Resizes that image by defining a new height by keeping ratio.
*/
resizeHeight(newHeight: number): IBitmap;
/**
* Resizes that image by defining a new (maximum) size by keeping ratio.
*/
resizeMax(maxSize: number): IBitmap;
/**
* Resizes that image by defining a new width by keeping ratio.
*/
resizeWidth(newWidth: number): IBitmap;
/**
* Rotates the image.
*/
rotate(degrees?: number): IBitmap;
/**
* Sets a pixel / point.
*/
setPoint(coordinates?: IPoint2D | string,
color?: string | number | IArgb): IBitmap;
/**
* Gets the size.
*/
size: ISize;
/**
* Converts that image to a Base64 string.
*/
toBase64(format?: OutputFormat, quality?: number): string;
/**
* Converts that image to a data URL.
*/
toDataUrl(format?: OutputFormat, quality?: number): string;
/**
* Returns that image as ImageSource.
*/
toImageSource(): ImageSource;
/**
* Converts that image to an object.
*/
toObject(format?: OutputFormat, quality?: number): IBitmapData;
/**
* Writes a text.
*/
writeText(txt: any,
leftTop?: IPoint2D | string, font?: IFont | string): IBitmap;
/**
* Gets the width of the bitmap.
*/
width: number;
}
FAQs
A NativeScript module for creating and manipulating bitmap images. Forked from mkloubert and updated for NativeScript 8 with fixed iOS crop bug.
The npm package @oliverphaser/nativescript-bitmap-factory receives a total of 8 weekly downloads. As such, @oliverphaser/nativescript-bitmap-factory popularity was classified as not popular.
We found that @oliverphaser/nativescript-bitmap-factory demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.