Function to make Pictures Grey

GoJS
#1

Hi is there a function or a css trick to make pictures in the diagram grayscale. Like in CSS

img { filter: grayscale(100%); }
#2

Not at the moment. We’ll look into the possibility.

#3

OK Thank you Walter. Then i use a PHP solution. ;-)

#4

You can do this today if you are willing to use the GoJS SVG renderer. Then you can write in the CSS:

    #myDiagramDiv image {
      filter: grayscale(100%);
    }

An example: https://codepen.io/simonsarris/pen/vYRabYK

There are tradeoffs to using the SVG renderer, especially with complexity and performance. It may still be best to modify the images server-side. You may want to read: SVG drawing context -- Northwoods Software

Also note that you can always grayscale the entire canvas with CSS using the same filter, but this will grayscale more than just the images.

#5

Hi Simon. I get my pictures in this way:

function findHeadShot(pic) {
	if (!pic) return "images/nopic.png";
	return "images/photos/" + pic;
}

and this way:

myDiagram.add(
        $(go.Part,
          {
            name: "Map", 
			width: 100, height: 200,
            layerName: "Background", position: new go.Point(100,100),
            selectable: true, pickable: true, resizable: true,
          },
          $(go.Picture, { stretch: go.GraphObject.Fill }, "images/map.png")
        ));

and your solution dosn’t work. I want the headshotspics in grey.

#6

We have just released GoJS 2.3.4, with an experimental and undocumented filter feature, and you can write:

$(go.Picture, { stretch: go.GraphObject.Fill, filter: 'grayscale(100%)'  }, "images/map.png")

And it will work.

#7

Wow!! Works like a charm, thank you simon.
Nice and all the other CSS filter functions works also. :-)