How do I get backgrounds to be included in make image?

GoJS
1

I have a background image, I’m using a local file system project (no CORS issues), and when I call makeImage, my background does not appear. Code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoJS for Diagram Grid</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.0.4/go.js"></script>

    <script>
        function init() {
            const $ = go.GraphObject.make;
            myDiagram = $(go.Diagram, "myDiagramDiv");
            myDiagram.initialPosition = new go.Point(0, 0);
            myDiagram.grid.visible = false;


            let booths = [];
            let boothNum = 1000;
            for (let col = 0; col < 10; col++) {
                for (let row = 0; row < 10; row++) {
                    let items = {key: (boothNum++).toString(), pos: `${(col * 100) + 400} ${(row * 50) + 400}`};
                    items.tooltip = `Eon Software #${boothNum}`;
                    booths.push(items)
                }

            }
        
            myDiagram.model.nodeDataArray = booths;
            myDiagram.nodeTemplate = $(go.Node, "Auto",
                {
                    movable: true, resizable: true, selectable: false, desiredSize: new go.Size(50, 50), cursor: 'pointer',
                    click: (e, obj) => {
                        document.getElementById('selectedBooth').innerText = obj.key;
                         console.log(obj.part.data);
                        myDiagram.model.setDataProperty( obj.part.data, 'color', obj.part.data.color === 'blue' ? 'white' :'blue')
                    },
                    toolTip:  // define a tooltip for each node that displays the color as text
                        $("ToolTip",
                            $(go.TextBlock, {margin: 4, width: 200, wrap: go.TextBlock.WrapFit},
                                new go.Binding("text", "tooltip"))
                        )
                },
                $(go.Shape, "Rectangle", {fill: "white"}, new go.Binding(
                    "fill", "color"
                )), new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify),
                $(go.TextBlock, "text", {margin: 10, editable: true}, new go.Binding("text", "key"))
            );

            myDiagram.add(
                $(go.Part, {layerName: 'Background', position: new go.Point(0, 0), selectable: false},
                    $(go.Picture, "bg.png")
                )
            );

            myDiagram.toolManager.hoverDelay = 50;
            myDiagram.toolManager.draggingTool.isGridSnapEnabled = true;
            myDiagram.toolManager.resizingTool.isGridSnapEnabled = true;
            myDiagram.toolManager.draggingTool.isCopyEnabled = true;
            // myDiagram.toolManager.panningTool.isEnabled = false;
            myDiagram.grid.gridCellSize = new go.Size(25, 25);


            //  myDiagram.layout = $(go.CircularLayout);

        }

        function makeImage(){
            let img = myDiagram.makeImage( { scale: 1  });
            document.getElementById('img').appendChild(img);
        }
    </script>
</head>
<body onload="init()">

<div id="myDiagramDiv" style="width: 1500px; height: 750px  "></div>
<div id="selectedBooth">No booth selected</div>
<button onclick="makeImage()" >Make Image</button>
<div id="img"></div>
</body>
</html>
2

I don’t know, that should work. You could try adding a sourceCrossOrigin func to your image that returns “anonymous” or “use credentials” to see if that makes a difference.

Working example: https://codepen.io/simonsarris/pen/moqwJB?editors=1010