Adding Images

The Kittl SDK allows you to add images directly to the canvas using an external URL, or by uploading image files from the user's device and returning their reference IDs.

Adding an Image Directly

If you have an accessible image URL, you can add it directly to your artboard using kittl.design.image.addImage.

const addResult = await kittl.design.image.addImage({
    src: 'https://example.com/image.jpg',
    size: {
        width: 400,
        height: 400
    },
    position: {
        absolute: {
            left: 100,
            top: 100,
        },
    },
});

if (addResult.isOk) {
    console.log('Image added successfully:', addResult.result);
}

Uploading Images

To allow users to upload their own images, you first use the upload API to handle the file upload. The operation returns UserImageUpload metadata which contains the object name you need to render the image. For a dedicated walkthrough (including uploadTemp), see Upload API.

// 1. Upload the file blob
const uploadResult = await kittl.upload.image.upload({ blob: fileBlob });

if (uploadResult.isOk && uploadResult.result.length > 0) {
    const uploadedImage = uploadResult.result[0];

    // 2. Add it to the canvas using its generated reference
    const addResult = await kittl.design.image.addImage({
        src: uploadedImage.objectName,
        size: {
            width: 300,
            height: 300
        },
        position: {
            absolute: {
                left: 50,
                top: 50,
            },
        },
    });

    if (addResult.isOk) {
        console.log('Uploaded image placed on board.');
    }
}

Updating an Image

Use updateImage to modify an existing image's properties. Only specified properties are updated — everything else stays the same.

// Reposition an image
await kittl.design.image.updateImage({
    id: 'image-id',
    left: 200,
    top: 150,
});

// Resize an image
await kittl.design.image.updateImage({
    id: 'image-id',
    width: 500,
    height: 300,
});

// Change the image source
await kittl.design.image.updateImage({
    id: 'image-id',
    objectName: 'new-image-source',
});

// Add a border and shadow
await kittl.design.image.updateImage({
    id: 'image-id',
    stroke: '#000000',
    strokeWidth: 2,
    shadowColor: '#00000080',
});

See Image API Reference for full parameter details.