How to get the image associated with a shape

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 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.

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.