How to get image using Shape getAsImage for Dynamic Images about office-js

[shanshanzheng-dev]

Hi @KaranLala, could you share your code about call getAsImage is not work? And could you please share us more detail scenario what you want, do you want to convert a shape to an image? Thanks.

[KaranLala]

Hey yes, the code for getAsImage is below. I've also attached a excel file with two images in sheet1. This code should be able to read the first image, on the left, but not the second image, on the right. The image on the right will have the format 'UNKNOWN', which this code filters out to avoid an error, however, if you try to use getAsImage on the image on the right, it will throw an error.

sample-getAsImage-not-working.xlsx

/**
 * Retrieves all images from a specified worksheet.
 * @param {string} worksheetName The name of the worksheet.
 * @returns {Promise<any[]>} A promise that resolves to the collection of images in the worksheet.
 */
export const getImagesFromWorksheet = async (worksheetName: string): Promise<any[]> => {

    try {
        return await Excel.run(async (context) => {
            const sheet = context.workbook.worksheets.getItem(worksheetName);
            const shapes = sheet.shapes
            shapes.load('items');
            await context.sync();

            let images = shapes.items.filter(i => i.type == 'Image');
            images.forEach(img => img.load('image/format'))
            await context.sync();

            images = images.filter(img => img.image.format != 'UNKNOWN') //filters out dynamic images, which don't seem to work with getAsImage
            images.forEach(img => img.getAsImage(img.image.format))

            let imageData = images
                                .map(i => ({
                                        type: i.type, 
                                        top: i.top, left: i.left, height: i.height, width: i.width, 
                                        name: i.name, 
                                        format: i.image.format,
                                        image: i.getAsImage(i.image.format)
                                }));
            await context.sync();
            
            return imageData.map(i => ({ ...i, image: i.image.value }))
        });
    } catch (error) {
        console.error("Error retrieving images: " + error);
        throw error;
    }
};

[SiruiSun-MSFT]

Hi @KaranLala, Thanks for your reporting here! However, this seems like a by-design behavior.

Currently, the parameter of shape.getAsImage(format) just supports four types:

Excel.PictureFormat.BMP, Excel.PictureFormat.PNG, Excel.PictureFormat.JPEG, and Excel.PictureFormat.GIF (Link: https://learn.microsoft.com/en-us/javascript/api/excel/excel.shape?view=excel-js-preview#excel-excel-shape-getasimage-member(1)).

Since the dynamic shape's image format is not involved into our common category, which return the "UNKNOWN" format as you mentioned. When you use "images.forEach(img => img.getAsImage(img.image.format))" this line in your code, the parameter comes to be "UNKNOWN", which is not supported here.

To overcome this issue here, we would like to encourage you to use maybe "PNG/JPEG" here, which will return the image you want.

Thanks again!

[microsoft-github-policy-service]

This issue has been automatically marked as stale because it is marked as needing author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your interest in Office Add-ins!

[microsoft-github-policy-service]

This issue has been closed due to inactivity. Please comment if you still need assistance and we'll re-open the issue.