Image

Creating an ImageEntity from a URL

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    const image = await operation.entityForRef(imageRef);
    console.log('Image created at origin:', image.origin.toArray());
    console.log('Image dimensions:', image.width, 'x', image.height);
    console.log('Image pixel dimensions:', image.imageWidth, 'x', image.imageHeight);
}, 'Creating an image from URL');

Creating an ImageEntity with specific dimensions

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [100, 100, 0],
        width: 150,
        height: 100,
    });

    const image = await operation.entityForRef(imageRef);
    console.log('Image width:', image.width);
    console.log('Image height:', image.height);
}, 'Creating an image with specific dimensions');

Creating an ImageEntity from a data URL

let model = await SketchUpApi.getActiveModel();
await model.performOperation(operation => {
    const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';

    const imageRef = operation.createImage(operation.model, {
        resource: {
            dataUrl: dataUrl,
        },
        origin: [50, 50, 0],
        width: 100,
    });

    const image = operation.entityForRef(imageRef);
    console.log('Image created from data URL');
}, 'Creating an image from data URL');

Updating ImageEntity dimensions

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    let image = await operation.entityForRef(imageRef);
    console.log('Original dimensions:', image.width, 'x', image.height);

    // Update only the width (height will be preserved)
    operation.imageSetDimensions(imageRef, { width: 200 });
    image = await operation.entityForRef(imageRef);
    console.log('After width update:', image.width, 'x', image.height);

    // Update both width and height
    operation.imageSetDimensions(imageRef, { width: 150, height: 150 });
    image = await operation.entityForRef(imageRef);
    console.log('After both dimensions update:', image.width, 'x', image.height);
}, 'Updating image dimensions');

Moving an ImageEntity by setting its origin

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    let image = await operation.entityForRef(imageRef);
    console.log('Original origin:', image.origin.toArray());

    // Move the image to a new position
    operation.imageSetOrigin(imageRef, [100, 100, 50]);
    image = await operation.entityForRef(imageRef);
    console.log('New origin:', image.origin.toArray());
}, 'Moving an image');

Gluing an ImageEntity to a Face

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    // Create a group to contain our entities
    const group = operation.createGroup(operation.model);

    // Create a face to glue the image to
    const faceRef = operation.createFace(group, [
        [0, 0, 0],
        [200, 0, 0],
        [200, 200, 0],
        [0, 200, 0],
    ]);
    const face = await operation.entityForRef(faceRef);

    // Create an image
    const imageRef = await operation.createImage(group, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [50, 50, 1],
        width: 100,
    });

    let image = await operation.entityForRef(imageRef);
    console.log('Image gluedToId before:', image.gluedToId);

    // Glue the image to the face
    operation.imageSetGluedTo(imageRef, face);
    image = await operation.entityForRef(imageRef);
    console.log('Image gluedToId after:', image.gluedToId?.value);
    console.log('Face id:', face.id);

    // The image will now move with the face
    operation.drawingElementsApplyTransformation([face], [100, 100, 0]);
    image = await operation.entityForRef(imageRef);
    console.log('Image origin after face moved:', image.origin.toArray());

    // Unglue the image
    operation.imageSetGluedTo(imageRef, undefined);
    image = await operation.entityForRef(imageRef);
    console.log('Image gluedToId after ungluing:', image.gluedToId);
}, 'Gluing an image to a face');

Exporting an ImageEntity texture

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    const image = await operation.entityForRef(imageRef);

    // Export as PNG data URL
    const pngDataUrl = await image.export('png');
    console.log('Exported PNG data URL:', pngDataUrl.substring(0, 50) + '...');

    // Export as JPEG data URL
    const jpegDataUrl = await image.export('jpg');
    console.log('Exported JPEG data URL:', jpegDataUrl.substring(0, 50) + '...');
}, 'Exporting an image');

Querying ImageEntity properties

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    const image = await operation.entityForRef(imageRef);

    console.log('Image ID:', image.id);
    console.log('Image origin:', image.origin.toArray());
    console.log('Image normal vector:', image.normal.toArray());
    console.log('Image z-rotation:', image.zrotation);
    console.log('Image physical dimensions:', image.width, 'x', image.height);
    console.log('Image pixel dimensions:', image.imageWidth, 'x', image.imageHeight);
    console.log('Image file name:', image.fileName);
    console.log('Image bounds:', (await image.getBounds()).to_s);
}, 'Querying image properties');

Assigning a Tag to an ImageEntity

let model = await SketchUpApi.getActiveModel();
await model.performOperation(async operation => {
    const imageRef = await operation.createImage(operation.model, {
        resource: {
            request: 'https://cdn.habitat.sketchup.com/examples/images/ColorWheel.jpg',
        },
        origin: [0, 0, 0],
        width: 100,
    });

    const tagRef = operation.createTag('Image Tag');
    const tag = await operation.entityForRef(tagRef);

    let image = await operation.entityForRef(imageRef);
    console.log('Image tagId before:', image.tagId);

    operation.drawingElementSetTag(image, tag);
    image = await image.refresh();
    console.log('Image tagId after:', image.tagId);
    console.log('Tag id:', tag.id);
}, 'Assigning a tag to an image');