makeImage does not render images in nodes

GoJS
1

I am trying to export the canvas to a png image.
From the docs , I found out we have to use makeImage() function.
It is not rendering the images present in the nodes of the diagram.

here are the screenshots of the canvas and the generated image:

Canvas:

canvas.PNG1075×272 15.9 KB

This is the generated image:

image.PNG1069×242 2.49 KB

The code for the nodeTemplate is:
yDiagram.nodeTemplateMap.add("product", goObj(go.Node, "Spot",nodeStyle(), goObj(go.Picture, { maxSize: new go.Size(50, 40) }, new go.Binding("source", "img")), makePort("T", go.Spot.Top, false, true), makePort("L", go.Spot.Left, true, true), makePort("R", go.Spot.Right, true, true), makePort("B", go.Spot.Bottom, true, false) ));

The code which exports the image is:
var button = document.getElementById('openSVG'); button.addEventListener('click', function() { var newWindow = window.open("","newWindow"); if (!newWindow) return; var newDocument = newWindow.document; var svg = myDiagram.makeImage({ scale: 1 }); newDocument.body.appendChild(svg); }, false);

The input data for the model is of the following form:
{ key: "A",img:"img/cloud.png", group: "Site 1",category: "product" },

I am able to generate the svg successfully but encountering this issue to generate the image.Am I missing something?

Thanks.

2

First, I hope it is clear that Diagram.makeImage produces raster image data, not SVG. Call Diagram.makeSvg if you want SVG output.

Second, if you are using Pictures that their sources meet CORS requirements. enable cross-origin resource sharing

3

I have an image in the local storage, I am binding it this way:

$$(go.Picture,{margin: 7, width: 50, height: 50, background: “red”},new go.Binding(“source”));

{ key: “2”,name:“akhil”,source: “akhil.png”,parent: “3”,title:“Enginner-1”,category: “fresher”,age:“22”,project:“Blaze”},

the image file akhil.png is in my local storage.

Now I am trying to export the canvas to Jpeg image in the following way:

img = myDiagram.makeImage({
scale : 1,
background: “AntiqueWhite”,
type: “image/jpeg”});
You mentioned the image should be CORS enabled. Can you suggest a way to make the image CORS enabled.

4

You can read about it on the web. For example: enable cross-origin resource sharing