Apply css class to go.Picture

GoJS
1

Hello,

I am creating go.Picture to be displayed as images for the nodes based on base64 encoded images:

let picture = new go.Picture();
let base64picture = document.createElement("img");
base64picture.src = base64EncodedImageSrc;
picture.element = base64picture;

Now I would like to apply a css class in order to show the image in gray-scale.
I’ve tried several ways (.className, $(...).addClass()) of adding the class to the base64picture element but they have no effect.
Could you point me into the right direction how I could apply some css to the go.Picture?

Best regards,
Dominic

2

I believe that is correct – the image is not rendered by the HTMLImageElement, so CSS cannot be applied.

I’ll see if there is a way to achieve what you want, but I suspect the answer is no.

3

Sorry, since we use the HTML Canvas’ method for drawing the image onto the canvas, it cannot be decorated with CSS.

4

You can take a base64 image and draw it to your own canvas, and then do whatever compositing/pixel manipulation you want on that canvas, and use that Canvas as the go.Picture source.

Example: https://codepen.io/simonsarris/pen/BYgegj

Note that I put the compositing canvas in the DOM, but this is not a requirement, its just to demonstrate visually what’s going on.

5

Hi,
drawing my own canvas seems to work, thanks for the suggestion!