Using makeImageData() function , the image inside the diagram is lost on Download

GoJS
1

Hey,
My diagram contains elements dropped from a palette containing Shapes and Pictures. I am trying to use the makeImageData function to get an image of the diagram. When download occurs I am able to see the shape nodes in the diagram but the images that were drag and dropped in the diagram were lost

Code used identical to as shown in samples

  function myCallback(blob) {
      var url = window.URL.createObjectURL(blob);
      var filename = "myBlobFile.png";

      var a = document.createElement("a");
      a.style = "display: none";
      a.href = url;
      a.download = filename;

      // IE 11
      if (window.navigator.msSaveBlob !== undefined) {
        window.navigator.msSaveBlob(blob, filename);
        return;
      }

      document.body.appendChild(a);
      requestAnimationFrame(function() {
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      });
    }

    function makeBlob() {
      var blob = myDiagram.makeImageData({ background: "white", returnType: "blob", callback: myCallback });
    }

Output

myBlobFile (2)
myBlobFile (2)500×502 1.2 KB

Expected
error

Thanks a lot in advance !

2

That looks like a CORS security problem on your server. https://enable-cors.org/

3

Hey,
Images are rendered from local storage , would it still require CORS to be enabled?

4

Yes, that would not be the same domain. Although I think different browsers behave differently for such cases.

5

Hey , I tried out CORS but facing a certain issue , since the application is still on local html5 and
which domain request should i allow through CORS in my Javascript?

6

What did you try?

7

I realised that the problem was only happening for Chrome browser, other browsers were able to download the image.
I tried adding

<meta http-equiv="Access-Control-Allow-Origin" content="*">

And also tried

<?php header("Access-Control-Allow-Origin:*"); ?>

I also tried adding a CORS extension to my chrome and tested post switching on CORS , it still wasn’t able to download the images.
It works absolutely fine with Internet Explorer and Firefox
How can make it function for chrome as well , thanks a lot !!

8

I just modified a copy of the samples/orgChartEditor.html by adding a button that does this:

    document.body.appendChild(myDiagram.makeImage())

This worked correctly in both Firefox and Chrome when running on my local machine, at http://localhost:5500/samples/orgChartEditor%20copy.html. In other words, the photos were included in the generated HTMLImageElement.