Learn how to manipulate images using Canvacord’s image manipulation api.
import {
createTemplate,
ImageFactory,
TemplateImage,
createImageGenerator,
type ImageSource,
} from "canvacord";
const Manipulator = createTemplate((image: ImageSource) => {
return {
steps: [
// base image
{
// one step can take multiple images
image: [
{
source: new TemplateImage(ImageFactory.AFFECT), // source image
x: 0, // x position
y: 0, // y position
},
],
},
// target image
{
image: [
{
source: new TemplateImage(image), // target image
x: 180, // x position
y: 383, // y position
width: 200, // width
height: 157, // height
},
],
},
],
};
});
// get target photo to use on "affected" meme image
const photo = await getPhotoForMemeSomehow();
const generator = createImageGenerator(Manipulator(photo));
// render out the image
await generator.render();
// get the resulting image in png format
const affectedMeme = await generator.encode("png");
export 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>;
}
export interface CustomGenerationStep {
/**
* The function to call when processing this step.
*/
process: (
canvas: Canvas,
ctx: SKRSContext2D,
step: ImageGenerationStep
) => Awaited<void>;
}
export 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>;
}
export 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.
*/
export 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;
}
Was this page helpful?