Hi is there a function or a css trick to make pictures in the diagram grayscale. Like in CSS
img { filter: grayscale(100%); }
Hi is there a function or a css trick to make pictures in the diagram grayscale. Like in CSS
img { filter: grayscale(100%); }
Not at the moment. We’ll look into the possibility.
OK Thank you Walter. Then i use a PHP solution. ;-)
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.
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.
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.
Wow!! Works like a charm, thank you simon.
Nice and all the other CSS filter functions works also. :-)