Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

canvacord

Package Overview
Dependencies
Maintainers
5
Versions
244
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvacord - npm Package Compare versions

Comparing version 6.0.0-beta.0 to 6.0.0-beta.1

967

dist/index.d.ts

@@ -7,6 +7,6 @@ import { Font as Font$1, SatoriOptions } from 'satori';

import { EncoderOptions } from '@skyra/gifenc';
import * as React from 'react';
import * as http from 'http';
import { PngEncodeOptions, AvifConfig as AvifConfig$1 } from '@napi-rs/image';
import * as React$1 from 'react';
import { CSSProperties } from 'react';
import { PngEncodeOptions, AvifConfig as AvifConfig$1 } from '@napi-rs/image';
import * as http from 'http';
import { ClassNameValue } from 'tailwind-merge';

@@ -17,10 +17,62 @@

alias: string;
/**
* Creates and registers a new Font instance for both canvas and builder apis.
* @param data The font data
* @param [alias] The font alias. If not provided, a random UUID will be used.
* @example ```typescript
* const data = await readFile('path/to/font.ttf');
* const font = new Font(data, 'my-font');
* ```
*/
constructor(data: Buffer, alias?: string);
/**
* The alias for this font.
*/
get name(): string;
/**
* Returns the font data that includes information such as the font name, weight, data, and style.
*/
getData(): Font$1;
/**
* String representation of this font.
*/
toString(): string;
/**
* JSON representation of this font.
*/
toJSON(): Font$1;
/**
* Creates a new Font instance from a file.
* @param path The path to the font file
* @param [alias] The font alias. If not provided, a random UUID will be used.
* @example ```typescript
* const font = await Font.fromFile('path/to/font.ttf', 'my-font');
* ```
*/
static fromFile(path: string, alias?: string): Promise<Font>;
/**
* Creates a new Font instance from a file synchronously.
* @param path The path to the font file
* @param [alias] The font alias. If not provided, a random UUID will be used.
* @example ```typescript
* const font = Font.fromFileSync('path/to/font.ttf', 'my-font');
* ```
*/
static fromFileSync(path: string, alias?: string): Font;
/**
* Creates a new Font instance from a buffer.
* @param buffer The buffer containing the font data
* @param [alias] The font alias. If not provided, a random UUID will be used.
* @example ```typescript
* const buffer = await readFile('path/to/font.ttf');
* const font = Font.fromBuffer(buffer, 'my-font');
* ```
*/
static fromBuffer(buffer: Buffer, alias?: string): Font;
/**
* Loads the default font bundled with this package.
* @example ```typescript
* const font = Font.loadDefault();
* ```
*/
static loadDefault(): Font;

@@ -30,2 +82,5 @@ }

declare const FontFactory: Map<string, Font>;
/**
* The image assets factory.
*/
declare const ImageFactory: {

@@ -76,6 +131,26 @@ AFFECT: string;

declare abstract class Encodable {
/**
* Returns the canvas instance by applying the steps.
*/
abstract getFinalCanvas(): Promise<Canvas>;
/**
* Encodes the canvas to a buffer.
*/
encode(): Promise<Buffer>;
/**
* Encodes the canvas to a png buffer.
* @param format The encoding format - `png`
*/
encode(format: 'png'): Promise<Buffer>;
/**
* Encodes the canvas to a jpeg or webp buffer.
* @param format The encoding format - `jpeg` or `webp`
* @param [options] The quality of the image
*/
encode(format: 'jpeg' | 'webp', options?: number): Promise<Buffer>;
/**
* Encodes the canvas to an avif buffer.
* @param format The encoding format - `avif`
* @param [options] The encoding options
*/
encode(format: 'avif', options?: AvifConfig): Promise<Buffer>;

@@ -85,43 +160,148 @@ }

interface ImageGenerationStep {
/**
* The image to render.
*/
image?: ImgenStep[];
/**
* The text to render.
*/
text?: TextGenerationStep[];
/**
* The custom steps to apply to the canvas.
*/
custom?: CustomGenerationStep[];
/**
* The function to call before processing this step.
*/
preprocess?: (canvas: Canvas, ctx: SKRSContext2D, step: ImageGenerationStep) => Awaited<void>;
/**
* The function to call when processing this step.
*/
process?: (canvas: Canvas, ctx: SKRSContext2D, step: ImageGenerationStep) => Awaited<void>;
/**
* The function to call after processing has finished.
*/
postprocess?: (canvas: Canvas, ctx: SKRSContext2D, step: ImageGenerationStep) => Awaited<void>;
}
interface CustomGenerationStep {
/**
* The function to call when processing this step.
*/
process: (canvas: Canvas, ctx: SKRSContext2D, step: ImageGenerationStep) => Awaited<void>;
}
interface ImgenStep {
/**
* The image to render.
*/
source: TemplateImage;
/**
* The x position of the image.
*/
x: number;
/**
* The y position of the image.
*/
y: number;
/**
* The width of the image.
*/
width?: number;
/**
* The height of the image.
*/
height?: number;
/**
* The function to call before processing this step.
*/
preprocess?: (canvas: Canvas, ctx: SKRSContext2D, source: ImgenStep) => Awaited<void>;
/**
* The function to call when processing this step.
*/
process?: (canvas: Canvas, ctx: SKRSContext2D, source: ImgenStep) => Awaited<void>;
/**
* The function to call after processing has finished.
*/
postprocess?: (canvas: Canvas, ctx: SKRSContext2D, source: ImgenStep) => Awaited<void>;
}
interface TextGenerationStep {
/**
* The text to render.
*/
value: string;
/**
* The font of the text.
*/
font: string;
/**
* The color of the text.
*/
color: string;
/**
* Whether to stroke the text.
*/
stroke?: boolean;
/**
* The x position of the text.
*/
x: number;
/**
* The y position of the text.
*/
y: number;
/**
* The maximum width of the text.
*/
maxWidth?: number;
/**
* The line height of the text.
*/
lineHeight?: number;
/**
* The line width of the text.
*/
lineWidth?: number;
/**
* The alignment of the text.
*/
align?: 'left' | 'center' | 'right';
/**
* The baseline of the text.
*/
baseline?: 'top' | 'middle' | 'bottom';
/**
* The directionality of the text.
*/
direction?: 'inherit' | 'ltr' | 'rtl';
/**
* The function to call before processing this step.
*/
preprocess?: (canvas: Canvas, ctx: SKRSContext2D, text: TextGenerationStep) => Awaited<void>;
/**
* The function to call when processing this step.
*/
process?: (canvas: Canvas, ctx: SKRSContext2D, text: TextGenerationStep) => Awaited<void>;
/**
* The function to call after processing has finished.
*/
postprocess?: (canvas: Canvas, ctx: SKRSContext2D, text: TextGenerationStep) => Awaited<void>;
}
/**
* The template to use for image generation.
*/
interface IImageGenerationTemplate {
/**
* The width of the template.
*/
width?: number;
/**
* The height of the template.
*/
height?: number;
/**
* The steps to apply to the canvas.
*/
steps: ImageGenerationStep[];
/**
* The gif options.
*/
gif?: EncoderOptions;

@@ -132,15 +312,65 @@ }

readonly height?: number | undefined;
/**
* The steps to apply to the canvas.
*/
steps: ImageGenerationStep[];
/**
* The gif options.
*/
gif?: EncoderOptions;
/**
* Creates a new ImageGenerationTemplate instance from a template.
* @param template The template to use
* @returns The created template
*/
static from(template: IImageGenerationTemplate): ImageGenerationTemplate;
/**
* Creates a new ImageGenerationTemplate instance.
* @param width The width of the template
* @param height The height of the template
*/
constructor(width?: number | undefined, height?: number | undefined);
/**
* Sets the steps. This will overwrite any existing steps.
* @param steps The steps to set
*/
setSteps(steps: ImageGenerationStep[]): this;
/**
* Sets the gif options.
* @param options The gif options
*/
setGifOptions(options?: EncoderOptions): this;
/**
* Returns whether the template is a gif.
*/
isGif(): boolean;
/**
* Adds a step to the template.
* @param step The step to add
*/
addStep(step: ImageGenerationStep): this;
/**
* Adds steps to the template.
* @param steps The steps to add
*/
addSteps(steps: ImageGenerationStep[]): this;
/**
* Clears the steps.
*/
clearSteps(): this;
/**
* Returns whether the size is inferrable.
*/
isInferrable(): boolean;
/**
* Returns the width of the template.
*/
getWidth(): number | undefined;
/**
* Returns the height of the template.
*/
getHeight(): number | undefined;
/**
* Returns the JSON representation of the template.
*/
toJSON(): IImageGenerationTemplate;

@@ -152,28 +382,100 @@ }

private _canvas;
/**
* Creates a new ImageGen instance.
* @param template The template to use
*/
constructor(template: ImageGenerationTemplate);
/**
* Adds a step to the template.
* @param step The step to add
*/
addStep(step: ImageGenerationStep): this;
/**
* Adds steps to the template.
* @param steps The steps to add
*/
addSteps(steps: ImageGenerationStep[]): this;
/**
* Sets the gif options.
* @param options The gif options
*/
setGifOptions(options?: EncoderOptions): this;
/**
* Returns whether the template is a gif.
*/
isGif(): boolean;
/**
* Generates a readable stream containing GIF data by applying the steps.
*/
generateGif(): Promise<stream.Readable>;
/**
* Renders the image by applying the steps.
*/
render(): Promise<this>;
/**
* Returns the canvas instance by applying the steps.
*/
getFinalCanvas(): Promise<Canvas>;
}
/**
* Creates a new image generator.
* @param template The template to use
*/
declare function createImageGenerator(template: ImageGenerationTemplate): ImageGen;
/**
* The element initialization options.
*/
type ElementInit = {
type: string;
props: Record<string, unknown>;
key?: React.Key | null;
key?: React$1.Key | null;
children?: any;
};
/**
* The JSX element.
*/
declare class Element {
/**
* The type of the element.
*/
type: string;
/**
* The props of the element.
*/
props: Record<string, unknown>;
key: React.Key | null;
/**
* The key of the element.
*/
key: React$1.Key | null;
/**
* The children of the element.
*/
children?: any;
/**
* Creates a new JSX element.
* @param _init The initialization options
*/
constructor(_init: ElementInit);
}
/**
* The JSX factory for canvacord jsx.
*/
declare const JSX$1: {
/**
* The JSX element instance.
*/
Element: typeof Element;
/**
* Creates a new JSX element.
* @param type The type of the element
* @param props The props of the element
* @param children The children of the element
* @returns The created element
*/
createElement(type: string | Element, props: Record<string, unknown>, ...children: Element[]): Element;
/**
* Creates a new JSX fragment.
* @param children The children of the fragment
*/
Fragment({ children }: {

@@ -183,26 +485,38 @@ children: Element[] | string;

};
/**
* Renders the components.
*/
declare function render(components: (Node | Element | unknown)[]): Element[];
declare module 'react' {
interface DOMAttributes<T> {
tw?: string;
}
}
declare global {
namespace JSX {
interface IntrinsicAttributes {
tw?: string;
}
}
}
/**
* The CSS properties like object.
*/
type CSSPropertiesLike<K extends string | number | symbol = string> = Record<K, CSSProperties>;
/**
* Performs object cleanup by deleting all undefined properties that could interfere with builder methods.
*/
declare const performObjectCleanup: (obj: Record<string, any>, deep?: boolean) => void;
declare class StyleSheet extends null {
private constructor();
/**
* Creates a new CSSPropertiesLike object.
*/
static create<O extends CSSPropertiesLike, K extends keyof O>(styles: CSSPropertiesLike<K>): CSSPropertiesLike<K>;
/**
* Composes two CSSPropertiesLike objects.
*/
static compose(style1: CSSProperties, style2: CSSProperties): CSSProperties;
/**
* Flattens an array of CSSPropertiesLike objects.
*/
static flatten(style: CSSProperties[]): CSSProperties;
/**
* Merges multiple tailwind-like class names into appropriate class names.
*/
static cn(...classes: ClassNameValue[]): string;
}
/**
* The options for rendering the svg.
*/
type RenderSvgOptions = PngEncodeOptions | AvifConfig$1 | number | null;

@@ -217,8 +531,28 @@ declare class CanvacordImage {

/**
* The supported image sources. It can be a buffer, a readable stream, a string, a URL instance or an Image instance.
*/
type ImageSource = CanvacordImage | Buffer | ArrayBuffer | Uint16Array | Uint32Array | Uint8Array | Uint8ClampedArray | SharedArrayBuffer | Readable | string | URL | Image;
/**
* The options for loading an image.
*/
interface LoadImageOptions {
/**
* The headers to use when downloading the image.
*/
headers?: Record<string, string>;
/**
* The maximum number of redirects to follow.
*/
maxRedirects?: number;
/**
* Other request options to use when downloading the image.
*/
requestOptions?: http.RequestOptions;
}
/**
* Loads an image from the specified source.
* @param source The image source
* @param [options] The options for loading the image
*/
declare function loadImage(source: ImageSource, options?: LoadImageOptions): Promise<CanvacordImage>;

@@ -229,7 +563,27 @@

source: ImageSource;
/**
* Creates a new TemplateImage instance.
* @param source The image source
* @example ```typescript
* const image = new TemplateImage('https://example.com/image.png');
* ```
*/
constructor(source: ImageSource);
/**
* Whether this image has been resolved.
*/
resolved(): boolean;
/**
* Resolves this image to consumable form.
*/
resolve(): Promise<Image>;
}
/**
* Creates a new template from the provided template.
* @param template The template to create from
*/
declare const createTemplate: <F extends (...args: any[]) => any, P extends Parameters<F>>(cb: (...args: P) => IImageGenerationTemplate) => (...args: P) => ImageGenerationTemplate;
/**
* The built-in template factory.
*/
declare const TemplateFactory: {

@@ -259,2 +613,5 @@ Affect: (image: ImageSource) => ImageGenerationTemplate;

/**
* The bundled fonts in this package.
*/
declare const Fonts: {

@@ -270,23 +627,83 @@ /**

private options;
/**
* Creates a new builder options manager.
* @param options The options to use
*/
constructor(options?: T);
/**
* Returns the options.
*/
getOptions(): T;
/**
* Sets the options. This will override the previous options.
* @param options The options to use
*/
setOptions(options: T): void;
/**
* Get an option by name.
* @param key The option name
* @returns The option value
*/
get<K extends keyof T>(key: K): T[K];
/**
* Set an option by name.
* @param key The option name
* @param value The option value
*/
set<K extends keyof T>(key: K, value: T[K]): void;
/**
* Merge new data to old data on an option by name.
*/
merge<K extends keyof T>(key: K, value: Partial<T[K]>): void;
}
/**
* The builder template.
*/
interface BuilderTemplate {
/**
* The components of this template.
*/
components: Array<Node | Element>;
/**
* The width of this template.
*/
width: number;
/**
* The height of this template.
*/
height: number;
/**
* The style of this template.
*/
style?: CSSProperties;
}
/**
* The build output format.
*/
type BuildFormat = 'svg' | 'png' | 'avif' | 'jpeg' | 'webp';
/**
* The builder build options.
*/
type BuilderBuildOptions = {
/**
* The output format.
*/
format?: BuildFormat;
/**
* The options for this build.
*/
options?: RenderSvgOptions;
/**
* The abort signal.
*/
signal?: AbortSignal;
} & SatoriOptions;
/**
* The builder node.
*/
interface Node {
/**
* Convert this node to element.
*/
toElement(): Element;

@@ -298,15 +715,60 @@ }

height: number;
/**
* The tailwind subset to apply to this builder.
*/
tw: string;
/**
* The components of this builder.
*/
components: (Node | Element)[];
/**
* The options manager of this builder.
*/
options: BuilderOptionsManager<T>;
/**
* Create a new builder.
* @param width the width of this builder.
* @param height the height of this builder.
*/
constructor(width: number, height: number);
/**
* Bootstrap this builder with data.
*/
bootstrap(data: T): void;
/**
* Adjust the canvas size.
*/
adjustCanvas(): this;
/**
* Get the style of this builder.
*/
get style(): CSSProperties;
/**
* Set the style of this builder.
*/
set style(newStyle: CSSProperties);
/**
* Add component to this builder.
* @param component the component to add.
*/
addComponent<T extends Node | Element>(component: T | T[]): this;
/**
* Set the style of this builder.
* @param newStyle the new style.
*/
setStyle(newStyle: CSSProperties): this;
private _render;
render(): Promise<Element>;
/**
* Render this builder.
*/
render(): Promise<React.ReactNode>;
/**
* Convert this builder into an image.
* @param options the build options.
* @returns the image buffer or svg string.
*/
build(options?: Partial<BuilderBuildOptions>): Promise<string | Buffer>;
/**
* Create a builder from builder template.
*/
static from(template: BuilderTemplate): Builder<Record<string, unknown>>;

@@ -316,15 +778,54 @@ }

interface LeaderboardProps {
/**
* The background image.
*/
background: ImageSource | null;
/**
* The background color.
*/
backgroundColor: string;
/**
* The header of this leaderboard ui.
*/
header?: {
/**
* The title of this leaderboard ui.
*/
title: string;
/**
* The subtitle of this leaderboard ui.
*/
subtitle: string;
/**
* The image of this leaderboard ui.
*/
image: ImageSource;
};
/**
* The players of this leaderboard ui.
*/
players: {
/**
* The display name of this player.
*/
displayName: string;
/**
* The username of this player.
*/
username: string;
/**
* The level of this player.
*/
level: number;
/**
* The xp of this player.
*/
xp: number;
/**
* The rank of this player.
*/
rank: number;
/**
* The avatar of this player.
*/
avatar: ImageSource;

@@ -334,71 +835,270 @@ }[];

declare class LeaderboardBuilder extends Builder<LeaderboardProps> {
/**
* Create a new leaderboard ui builder
*/
constructor();
/**
* Set background for this leaderboard ui
* @param background background image
*/
setBackground(background: ImageSource): this;
/**
* Set background color for this leaderboard ui
* @param color background color
*/
setBackgroundColor(color: string): this;
/**
* Set header for this leaderboard ui
* @param data header data
*/
setHeader(data: LeaderboardProps['header'] & {}): this;
/**
* Set players for this leaderboard ui
* @param players players data
*/
setPlayers(players: LeaderboardProps['players']): this;
/**
* Render this leaderboard ui on the canvas
*/
render(): Promise<JSX.Element>;
/**
* Render players ui on the canvas
*/
renderPlayers(players: JSX.Element[]): JSX.Element;
/**
* Render top players ui on the canvas
*/
renderTop({ avatar, displayName, level, rank, username, xp }: LeaderboardProps['players'][number]): Promise<JSX.Element>;
/**
* Render player ui on the canvas
*/
renderPlayer({ avatar, displayName, level, rank, username, xp }: LeaderboardProps['players'][number]): Promise<JSX.Element>;
}
/**
* The user status type.
*/
type StatusType = 'online' | 'idle' | 'dnd' | 'invisible';
/**
* The rank card builder props.
*/
interface RankCardBuilderProps {
/**
* The avatar for this rank card.
*/
avatar: ImageSource | null;
/**
* The style for this rank card.
*/
style: CSSPropertiesLike | null;
/**
* The fonts to be used for this rank card.
*/
fonts: Partial<{
/**
* The username font.
*/
username: string;
/**
* The progress font.
*/
progress: string;
/**
* The stats font.
*/
stats: string;
}>;
/**
* The status for this rank card.
*/
status: StatusType;
/**
* The current xp for this rank card.
*/
currentXP: number;
/**
* The required xp for this rank card.
*/
requiredXP: number;
/**
* The username for this rank card.
*/
username: string;
/**
* The display name for this rank card.
*/
displayName: string;
/**
* The discriminator for this rank card.
*/
discriminator: string;
/**
* The level of this rank card.
*/
level: number;
/**
* The rank of this rank card.
*/
rank: number;
/**
* The background for this rank card.
*/
background: ImageSource;
/**
* The styles for each element of this rank card.
*/
tw: {
/**
* The username style.
*/
username: string;
/**
* The discriminator style.
*/
discriminator: string;
/**
* The display name style.
*/
displayName: string;
/**
* The level style.
*/
level: string;
/**
* The rank style.
*/
rank: string;
/**
* The xp style.
*/
xp: string;
/**
* The progressbar style.
*/
progress: {
/**
* The progressbar track style.
*/
track: string;
/**
* The progressbar thumb style.
*/
thumb: string;
};
/**
* The overlay style.
*/
overlay: string;
/**
* The percentage style.
*/
percentage: string;
/**
* The avatar style.
*/
avatar: string;
/**
* The status style.
*/
status: string;
};
/**
* The renderer configuration for this rank card.
*/
renders: {
/**
* Whether to render the avatar.
*/
avatar: boolean;
/**
* Whether to render the background.
*/
background: boolean;
/**
* Whether to render the level.
*/
level: boolean;
/**
* Whether to render the rank.
*/
rank: boolean;
/**
* Whether to render the status.
*/
status: boolean;
/**
* Whether to render the username.
*/
username: boolean;
/**
* Whether to render the display name.
*/
displayName: boolean;
/**
* Whether to render the discriminator.
*/
discriminator: boolean;
/**
* Whether to render the progress.
*/
progress: boolean;
/**
* Whether to render the xp.
*/
xp: boolean;
/**
* Whether to render the progressbar.
*/
progressbar: boolean;
/**
* The constants for this rank card.
*/
constants: {
/**
* The rank constant.
*/
rank: string;
/**
* The level constant.
*/
level: string;
/**
* The xp constant.
*/
xp: string;
/**
* The status colors constant.
*/
statusColors: {
/**
* The light gray color.
*/
LightGray: string;
/**
* The gray color.
*/
Gray: string;
/**
* The dark gray color.
*/
DarkGray: string;
/**
* The white color.
*/
White: string;
/**
* The green color.
*/
Green: string;
/**
* The yellow color.
*/
Yellow: string;
/**
* The red color.
*/
Red: string;
/**
* The blue color.
*/
Blue: string;

@@ -410,19 +1110,100 @@ };

declare class RankCardBuilder extends Builder<RankCardBuilderProps> {
/**
* Creates a new rank card builder.
* @example
* const card = new RankCardBuilder()
* .setUsername('kiki')
* .setDisplayName('Kiki')
* .setDiscriminator('1234')
* .setAvatar('...')
* .setCurrentXP(300)
* .setRequiredXP(600)
* .setLevel(2)
* .setRank(5)
* .setStatus('online');
*
* const pngBuffer = await card.build({
* format: 'png'
* });
*/
constructor();
/**
* Sets the fonts to be used for this rank card.
* @param fontConfig The fonts to be used for this rank card.
*/
setFonts(fontConfig: Required<RankCardBuilderProps['fonts']>): this;
/**
* Sets the avatar for this rank card.
* @param image The avatar for this rank card.
*/
setAvatar(image: ImageSource): this;
/**
* Sets the background for this rank card.
* @param image The background for this rank card.
*/
setBackground(image: ImageSource): this;
/**
* Sets the status for this rank card.
* @param status The status for this rank card.
*/
setStatus(status: StatusType): this;
/**
* Sets the username for this rank card.
* @param name The username for this rank card.
*/
setUsername(name: string): this;
/**
* Sets the display name for this rank card.
* @param name The display name for this rank card.
*/
setDisplayName(name: string): this;
/**
* Sets the discriminator for this rank card.
* @param discriminator The discriminator for this rank card.
*/
setDiscriminator(discriminator: string): this;
/**
* Sets the current xp for this rank card.
* @param xp The current xp for this rank card.
*/
setCurrentXP(xp: number): this;
/**
* Sets the required xp for this rank card.
* @param xp The required xp for this rank card.
*/
setRequiredXP(xp: number): this;
/**
* Sets the level of this rank card.
* @param level The level of this rank card.
*/
setLevel(level: number): this;
/**
* Sets the rank of this rank card.
* @param rank The rank of this rank card.
*/
setRank(rank: number): this;
/**
* Configures the renderer for this rank card.
* @param config The configuration for this rank card.
*/
configureRenderer(config: Partial<RankCardBuilderProps['renders']>): this;
/**
* Renders this rank card into the canvas.
*/
render(): Promise<JSX.Element>;
}
/**
* Creates a canvas image from the image source.
* @param img The image source
* @returns The canvas image
* @example ```typescript
* const image = await createCanvasImage('https://example.com/image.png');
* ```
*/
declare const createCanvasImage: (img: ImageSource) => Promise<_napi_rs_canvas.Image>;
/**
* The steps to apply to the canvas.
* @param ctx The canvas context
*/
type ContextManipulationStep = (ctx: SKRSContext2D) => Awaited<void>;

@@ -433,6 +1214,20 @@

height: number;
/**
* The steps to apply to the canvas.
*/
steps: ContextManipulationStep[];
private _canvas;
/**
* Creates a new CanvasHelper instance.
* @param width The width of the canvas
* @param height The height of the canvas
*/
constructor(width: number, height: number);
/**
* Returns the canvas instance by applying the steps.
*/
getFinalCanvas(): Promise<Canvas>;
/**
* Processes the steps and applies them to the canvas.
*/
abstract process(canvas: Canvas, ctx: SKRSContext2D): Promise<void>;

@@ -443,13 +1238,70 @@ }

#private;
/**
* Draws the image to the canvas.
* @param image The image to draw
* @param x The x position to draw the image
* @param y The y position to draw the image
* @param [width] The width of the image
* @param [height] The height of the image
*/
drawImage(image: ImageSource, x?: number, y?: number, width?: number, height?: number): this;
/**
* Applies invert filter to the image.
* @param value The filter intensity
*/
invert(value: number): this;
/**
* Applies grayscale filter to the image.
* @param value The filter intensity
*/
grayscale(value?: number): this;
/**
* Applies sepia filter to the image.
* @param value The filter intensity
*/
sepia(value: number): this;
/**
* Applies opacity filter to the image.
* @param value The filter intensity
*/
opacity(value: number): this;
/**
* Applies saturate filter to the image.
* @param value The filter intensity
*/
saturate(value: number): this;
/**
* Applies hue-rotate filter to the image.
* @param value The degrees to rotate
*/
hueRotate(value: number): this;
/**
* Applies contrast filter to the image.
* @param value The filter intensity
*/
contrast(value: number): this;
/**
* Applies brightness filter to the image.
* @param value The filter intensity
*/
brightness(value: number): this;
/**
* Applies blur filter to the image.
* @param value The filter intensity
*/
blur(value: number): this;
/**
* Applies drop-shadow filter to the image.
* @param config The drop-shadow config
* @param config.x The x offset of the shadow
* @param config.y The y offset of the shadow
* @param config.radius The blur radius of the shadow
* @param config.color The color of the shadow
*/
dropShadow(config: DropShadowConfig): this;
/**
* Renders the applied filters to the canvas.
* @param canvas The canvas to render the filters to
* @param ctx The canvas context
*/
process(canvas: Canvas, ctx: SKRSContext2D): Promise<void>;

@@ -467,8 +1319,39 @@ }

source: ImageSource;
/**
* Creates a new CanvasImage instance.
* @param source The image source
* @param [width] The width of the image
* @param [height] The height of the image
*/
constructor(source: ImageSource, width?: number, height?: number);
/**
* Draws the image to the canvas.
* @param x The x position to draw the image
* @param y The y position to draw the image
* @param [width] The width of the image
* @param [height] The height of the image
*/
draw(x?: number, y?: number, width?: number, height?: number): this;
/**
* Draws the image to the canvas with a circle clip.
* @param [width] The width of the image
* @param [height] The height of the image
*/
circle(width?: number, height?: number): this;
/**
* Draws pixelated image to the canvas.
* @param [pixels=5] The amount of pixels to use
*/
pixelate(pixels?: number): this;
/**
* Saves the canvas context state.
*/
save(): this;
/**
* Restores the last saved canvas context state.
*/
restore(): this;
/**
* Returns the canvas instance by applying the steps.
*/
getFinalCanvas(): Promise<Canvas>;

@@ -479,10 +1362,50 @@ }

#private;
/**
* Rotates the canvas.
*/
rotate(degrees: number): this;
/**
* Flips the canvas.
* @param axis The axis to flip, `x` or `y`.
*/
flip(axis: 'x' | 'y'): void;
/**
* Scales the canvas.
* @param x The x scale
* @param y The y scale
*/
scale(x: number, y: number): void;
/**
* Translates the canvas.
* @param x The x position to translate
* @param y The y position to translate
*/
translate(x: number, y: number): void;
/**
* Erases a part of the canvas.
* @param x The x position to erase
* @param y The y position to erase
* @param width The width of the area to erase
* @param height The height of the area to erase
*/
erase(x: number, y: number, width: number, height: number): void;
/**
* Applies a transform to the canvas.
*/
transform(a: number, b: number, c: number, d: number, e: number, f: number): void;
/**
* Resets the transform of the canvas.
*/
resetTransform(): void;
/**
* Applies a circular clip to the image.
* @param width The width of the image
* @param height The height of the image
*/
circularize(width: number, height: number): void;
/**
* Processes the steps and applies them to the canvas.
* @param canvas The canvas to apply the steps to
* @param ctx The canvas context to apply the steps to
*/
process(canvas: Canvas, ctx: SKRSContext2D): Promise<void>;

@@ -548,4 +1471,10 @@ }

type Canvacord = CanvacordFactory & typeof CanvacordConstructor;
/**
* Creates a new Canvacord image processor.
* @param source The image source to use
* @param options The options to use
* @returns The image processor
*/
declare const canvacord: Canvacord;
export { BuildFormat, Builder, BuilderBuildOptions, BuilderOptionsManager, BuilderTemplate, CSSPropertiesLike, Canvacord, CanvacordFactory, CanvacordInit, CanvasHelper, CanvasImage, ContextManipulationStep, CustomGenerationStep, DropShadowConfig, Element, ElementInit, Encodable, EncodingFormat, Font, FontFactory, Fonts, IImageGenerationTemplate, ImageFactory, ImageFilterer, ImageGen, ImageGenerationStep, ImageGenerationTemplate, ImageGeneratorImplementor, ImageManipulator, ImageSource, ImgenStep, JSX$1 as JSX, LeaderboardBuilder, LeaderboardProps, LoadImageOptions, Node, RankCardBuilder, StyleSheet, TemplateFactory, TemplateImage, TextGenerationStep, canvacord, createCanvasImage, createTemplate, loadImage, performObjectCleanup, render };
export { BuildFormat, Builder, BuilderBuildOptions, BuilderOptionsManager, BuilderTemplate, CSSPropertiesLike, Canvacord, CanvacordFactory, CanvacordInit, CanvasHelper, CanvasImage, ContextManipulationStep, CustomGenerationStep, DropShadowConfig, Element, ElementInit, Encodable, EncodingFormat, Font, FontFactory, Fonts, IImageGenerationTemplate, ImageFactory, ImageFilterer, ImageGen, ImageGenerationStep, ImageGenerationTemplate, ImageGeneratorImplementor, ImageManipulator, ImageSource, ImgenStep, JSX$1 as JSX, LeaderboardBuilder, LeaderboardProps, LoadImageOptions, Node, RankCardBuilder, StyleSheet, TemplateFactory, TemplateImage, TextGenerationStep, canvacord, createCanvasImage, createImageGenerator, createTemplate, loadImage, performObjectCleanup, render };

43

package.json
{
"name": "canvacord",
"description": "Generate images on-the-fly with the help of wide range of templates.",
"version": "6.0.0-beta.0",
"version": "6.0.0-beta.1",
"main": "./dist/index.js",
"exports": {
"require": {
"default": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"import": {
"default": "./dist/index.mjs",
"types": "./dist/index.d.mts"
}
},
"types": "./dist/index.d.ts",
"module": "./dist/index.mjs",
"files": [
"dist"
],
"dependencies": {
"@napi-rs/canvas": "^0.1.41",
"@napi-rs/image": "^1.7.0",
"@resvg/resvg-js": "^2.6.0",
"@skyra/gifenc": "^1.0.1",
"file-type": "16.5.4",
"satori": "^0.10.9",
"tailwind-merge": "^1.14.0"
},
"scripts": {
"format": "prettier --write \"./src/**/*.{js,ts,jsx,tsx}\"",
"format": "yarn dlx @biomejs/biome format src --write",
"build": "tsup",
"test": "tsx ./test/index.ts",
"test:jsx": "tsx ./test/jsxTest.tsx",
"bench": "cd ./benchmark && node jsx-renderer.mjs"
"bench": "cd ./benchmark && node jsx-renderer.mjs",
"lint": "yarn dlx @biomejs/biome lint src"
},

@@ -52,14 +36,25 @@ "repository": {

},
"homepage": "https://github.com/neplextech/canvacord#readme",
"homepage": "https://canvacord.js.org",
"packageManager": "yarn@3.6.0",
"devDependencies": {
"@biomejs/biome": "^1.4.1",
"@types/node": "^20.3.1",
"@types/react": "^18.2.12",
"benny": "^3.7.1",
"prettier": "^2.8.8",
"biome": "^0.0.0",
"tailwindcss": "^3.3.3",
"tsconfig": "^0.0.0",
"tsup": "^7.2.0",
"tsx": "^3.12.7",
"typescript": "^5.1.3"
},
"dependencies": {
"@napi-rs/canvas": "^0.1.44",
"@napi-rs/image": "^1.7.0",
"@resvg/resvg-js": "^2.6.0",
"@skyra/gifenc": "^1.0.1",
"file-type": "16.5.4",
"satori": "^0.10.11",
"tailwind-merge": "^2.0.0"
}
}

174

README.md

@@ -7,6 +7,6 @@ [![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)

> **Warning**
>
> You are looking at the next version of canvacord, which is under development. Go to the [legacy branch](https://github.com/neplextech/canvacord/tree/legacy) to view legacy codebase.
## Documentation
https://canvacord.js.org
## Features

@@ -19,2 +19,4 @@

- complex layouts _(wip)_
- templates api _(wip)_
- builder api _(wip)_

@@ -25,2 +27,4 @@ ## Example

#### Using built-in templates (New "Legacy api")
<!-- prettier-ignore -->

@@ -35,2 +39,6 @@ ```ts

// image generation
const beautiful = await canvacord.beautiful(img);
const facepalm = await canvacord.facepalm(img);
// filters

@@ -59,4 +67,162 @@ const filtered = await canvacord

## XP Card Preview
## XP Card
```ts
import { Font, RankCardBuilder } from "canvacord";
import { writeFile } from "fs/promises";
// load default font
Font.loadDefault();
const card = new RankCardBuilder()
.setUsername("Lost Ctrl")
.setDisplayName("thearchaeopteryx")
.setAvatar("...")
.setCurrentXP(3800)
.setRequiredXP(2500)
.setLevel(54)
.setRank(32)
.setStatus("online");
const image = await card.build({
format: "png",
});
await writeFileSync("./card.png", data);
```
![xp-card](https://raw.githubusercontent.com/neplextech/canvacord/main/test/jsx/test2.svg)
## Creating images using custom template
```ts
import {
createTemplate,
ImageFactory,
TemplateImage,
createImageGenerator,
} from "canvacord";
const AffectedMeme = createTemplate((image: ImageSource) => {
return {
steps: [
{
image: [
{
source: new TemplateImage(ImageFactory.AFFECT),
x: 0,
y: 0,
},
],
},
{
image: [
{
source: new TemplateImage(image),
x: 180,
y: 383,
width: 200,
height: 157,
},
],
},
],
};
});
// get target photo to use on "affected" meme image
const photo = await getPhotoForMemeSomehow();
const generator = createImageGenerator(AffectedMeme(photo));
// render out the image
await generator.render();
// get the resulting image in png format
const affectedMeme = await generator.encode("png");
```
#### Result
![output](https://raw.githubusercontent.com/neplextech/canvacord/main/test/canvas/affected.png)
## Creating images using custom builder
This is an advanced method of creating images. Canvacord builder api allows you to create your own image generator using JSX elements and a **subset of tailwind class names**. This is also possible without JSX, you can find an example [here](https://github.com/neplextech/canvacord/blob/7651c1aa51a844c2591cbe68a6e21eb9d1d6287a/benchmark/jsx-renderer.mjs).
> **Note**
> It does not support many css features such as grid layout. You can use flexbox instead.
If you want to use JSX with typescript, you need to add the following options to your `tsconfig.json`:
```jsonc
{
"compilerOptions": {
// other options
"jsx": "react",
"jsxFactory": "JSX.createElement",
"jsxFragmentFactory": "JSX.Fragment"
}
// other options
}
```
You can also use pragma comments to define JSX factory and fragment factory:
```js
/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */
```
```tsx
// JSX import is required if you want to use JSX syntax
// Builder is a base class to create your own builders
// Font is a utility class to load fonts
import { JSX, Builder, Font } from "canvacord";
import { writeFile } from "fs/promises";
// declare props types
interface Props {
text: string;
}
class Design extends Builder<Props> {
constructor() {
// set width and height
super(500, 500);
// initialize props
this.bootstrap({ text: "" });
}
// define custom methods for your builder
setText(text: string) {
this.options.set("text", text);
return this;
}
// this is where you have to define how the resulting image should look like
async render() {
return (
<div className="flex items-center justify-center h-full w-full bg-teal-500">
<h1 className="text-white font-bold text-7xl">
{this.options.get("text")}
</h1>
</div>
);
}
}
// usage
// load font
Font.loadDefault();
// create design
const design = new Design().setText("Hello World");
const image = await design.build({ format: "png" });
// do something with generated image
await writeFile("./test.png", image);
```
#### Result
![output](https://github.com/neplextech/canvacord/assets/46562212/c50d09d6-33c4-4b44-81c2-aed6783f503c)
LICENSE
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc