How to get the image associated with a shape

Great question! Our extension documentation here has a helper method used to create images - https://lucid.readme.io/docs/editor-extension-images . As it mentions in the notes,

Keep in mind that images are just blocks, and they can be handled as such.
We provide a few wrapper methods, such as addImage, that abstract away some block information that is less frequently used for images, but note that an image can be modified just as a block could be.
The block class that is used in our helper methods is UserImage2Block. Although, any block class will work to display images, so long as the fill color is set to the image.

`fillStyle` is the property for an image background (both used in the helper method, and on other blocks). If you’re wanting to set or get the image fill on any block, you can access the fillStyle property directly.

This would be an example that sets & gets the fillStyle:

let imageUrl = 'https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png';

let block:BlockProxy = page.addBlock({
    className: 'ImageSearchBlock2',//this could be any valid className
    boundingBox: {x: 0, y:0, w:150, h:150},
    lineWidth: 0
});


//set image fill
block.properties.set('fillStyle', {
    url: imageUrl,
    position: SimpleImageFillPosition.Fit //see SimpleImageFillPosition for all options
});


//get image fill
block.properties.get('fillStyle');

Let me know if you have any further questions!

Thanks Alyssa,

I try your code and it works, but after investigations on my shape, the “block.properties.get('fillStyle');”

return “undefined” on my custom shape.

So it seems not to work on custom shape.

Here is the definition on my custom shape

{
    images: {
        "logo": {
            type: 'file'
            path: 'applicationicon.png'
        }
    }
    style: {
        fill: {
            type: 'image'
            ref: 'logo'
            mode: 'stretch'
        }
        stroke: { 
            color: '#00000000', width: 1 
            }
        rounding: 0
    }
    geometry: [
        { 
            type: rect 
        }
    ]
}

I point that if i use on my CustomShape the code 

block.properties.set('fillStyle', { url: imageUrl, position: SimpleImageFillPosition.Fit”});

then I could retrieve the fillstyle.

Any suggestions ?

Best regards.

Hi Michel!

The property that we actually refer to here is ‘FillColor’, so could you replace ‘fillStyle’ with ‘FillColor’ and see if you can get the image that way?

Hi Connor,

Thanks for your reply.

First two questions for you. Did name of property are case sensitive ‘FillColor’ and fillColor are the same properties ? Where could we find the right properties name.

By the way:

blockItem.properties.get('FillColor')

return “#ffffffff” if no color is defined in the manifest of the library

// Manifest
{
	"shape": "imageNewUrl",
	"name": "Image New URL shape",
	"defaults": {
	}
}

// Shape definition
{
    images: {
        "logo": {
            type: 'url'
            path: 'https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png'
        }
    }
    style: {
        fill: {
            type: 'image'
            ref: 'logo'
            mode: 'stretch',
        }
    }
    geometry: [
        { 
            type: rect 
        }
    ]
}

Return strange value “#ff0000ff” is it is set

// Manifest
        {
            "shape": "image",
            "name": "Image shape",
            "defaults": {
                "fillColor": "#ff0000",
                "strokeColor": "#00ffff",
                "strokeWidth": 3,
                "rounding": 0,
                "width": 300,
                "height": 300
            }
        },

{

// Image definition
    images: {
        "logo": {
            type: 'file'
            path: 'applicationicon.png'
        }
    }
    style: {
        fill: {
            type: 'image'
            ref: 'logo'
            mode: 'stretch'
        }
        stroke: { 
            color: '#00000000', width: 1 
            }
        rounding: 0
    }
    geometry: [
        { 
            type: rect 
        }
    ]
}

One more thing, if I add by code an image in a page :

  page.addImage({
      boundingBox:{
          x, y, w:150, h:150
      },
      fillStyle: {
          url: 'https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png',
          position: SimpleImageFillPosition.Fill,
      },
  });

the information of the fillstyle of the block created is available through the FillColor property. (a bit strange).

FillColor:{"pos":"fill","url":"https://cdn-cashy-static-assets.lucidchart.com/marketing/images/LucidSoftwareFavicon.png","polys":null}

But remember, what I need is to get the image from a shape defined in a Shape Library.

Many thanks for your help.

Best regards.

A few things to note:

1. If you want to reference a file, that file has to be present in the “shape-library/images” folder.
2. Also, whether you are using a url or a file, either image type needs to be defined in the shape definition image map:

“images”: {
    “MyImage”: {
        “type”: “file”, 
        “path”: “<SomePath>”
    } 
}

3. It looks like you are using a combination of JSON and HJSON in your shape definition. Although this should theoretically work, I would recommend sticking to one to make debugging easier.

To answer your questions, yes “FillColor” is case sensitive. Unfortunately, we don’t have a comprehensive list of properties as we want the helpers to be used if possible (page.addImage, block.setFillStyle, etc.). My guess as to why the FillColor property is not being set to an image (and instead the default color) is because something is off in the shape definition as a whole. Could you make sure that your shape definition file is adhering to the notes I listed previously, and if you are getting any relevant errors in the console?

Thanks

Hi Connor,

Sorry to tell you that but it seems to be a nightmare to deal with image.

First:

If you want to set an image to a block you tell us that you need to set the fillStyle.

block.setFillStyle({url:"http://localhost:9900/resources/LucidSoftwareFavicon.png",position:SimpleImageFillPosition.Fit})

The result in fact is retrieved in getting the  FillColor. (Very confusing)

block.properties.get('FillColor')

If you want to use directly the properties you need then to specify the FillColor (Confusing again)

block.properties.set('FillColor', {
        url: imageUrl,
        position: SimpleImageFillPosition.Fit
      });

Second:

No way to add a local file except if you specify a URL

let imageUrl = "http://localhost:9900/resources/ApplicationIcon.png";

Third:

When using the url of the image, the url must refer to resources directory in the code but the image is retrieved from the public directory.

Fourth:

When defining you Custom Shape in a library with an image, you cannot retrieve this image either in the fillStyle or in the FillColor. I don’t know where it is.

If you define a fillstyle in the manifest for a shape as a default value (which is not documented but seems to be supported), then the fillStyle is retrieved but it is not he one that is used for displaying the image.

You will find on Github, a public repository that I have set to confirm what is being said above:

https://github.com/Michel-Laplane/visual-lucidchart-dumpobject-extension

“Dump selected object” retrieve the fillStyle and FillColor of a block.

“Add image to selected objects” adds an image to a block and then the FillColor appears when using the first command.

“Add image to page” adds an image to a page and the FillColor appears when using the first command which is expected as the AddImage method needs a fillStyle parameter.

The major problem is that I’m still not able to retrieve the image associated to a block.

Even i you use “Out the box” Shape like OrgChart shape where image are by default on the persons shape, no FillColor is there.

Could you please tell me if I am wrong?

Best regards and many thanks for your effort and time to help me.