Get blank image by makeImageData

Why I get a blank image?

<script src=""></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>
  <button onclick="saveImage()">save image</button>
  <img src="" alt="" id="image" width="1000" height="1000">

    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');
    survey.commitTransaction('change floorplan');

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

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