Get blank image by makeImageData

GoJS
1

Why I get a blank image?

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.7/go.js"></script>

<div id="sample">
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myDiagramDiv" style="flex-grow: 1; height: 750px; border: solid 1px black"></div>
  </div>
  <button onclick="saveImage()">save image</button>
  <img src="" alt="" id="image" width="1000" height="1000">
</div>


    window.goObject = go.GraphObject.make;
    window.survey = goObject(go.Diagram, "myDiagramDiv", {
          initialContentAlignment: go.Spot.Center,
          allowDrop: true, // must be true to accept drops from the Palette
          scale: 1,
    });

    imgurls = '1.png';
    window.floorPlan = window.goObject(go.Part, {
        name: "floorplan",
        layerName: "Background",
        position: new go.Point(0, 0),
        selectable: false,
        pickable: false,
        width: 500,
        height: 500
      },
      window.goObject(go.Picture, imgurls, { width: 500, height: 500 })
    );

    survey.startTransaction('change floorplan');
    window.survey.add(window.floorPlan);
    survey.commitTransaction('change floorplan');

    function saveImage() {
        var image = survey.makeImageData();
        document.getElementById('image').src = image;
    }

image
image.png2550×1296 869 KB

2

I am guessing that your code is experiencing a security restriction on rendering of the image. Is that image coming from a different domain than the page? Please read Cross-Origin Resource Sharing (CORS) - HTTP | MDN