diagram contains image from the remote server. when diagram is exported as png using diagram.makeImage() it excludes the images from the remote server. But it is working fine with local images.
canvas screenshot
generated image using diagram.makeImage()
<html>
<head>
<title>Gojs example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.7/go-debug.js"></script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:50%; height:500px"></div>
<div>
<button onclick="createImage()">create Image</button>
</div>
</div>
<script>
var $ = go.GraphObject.make;
var myDiagram = null;
function init() {
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.TreeLayout, {
angle: 90
})
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, {
"figure": "Rectangle",
width: 140,
height:140,
"fill": "#F5D9BD",
"stroke": "rgba(0, 0, 0, 1)",
"strokeWidth": 1.2,
"strokeJoin": "round",
}
),
$(go.Picture, "https://cdn0.iconfinder.com/data/icons/communication-technology/500/black_envelope-128.png",
{ width: 128, height: 128 }
)
);
myDiagram.model = new go.GraphLinksModel([{ key: "Alpha" }]);
}
function createImage() {
var newWindow = window.open("", "newWindow");
if (!newWindow) return;
var newDocument = newWindow.document;
var png = myDiagram.makeImage({
size: new go.Size(Infinity, Infinity),
scale: 1,
type: "image/png"
});
newDocument.body.appendChild(png);
}
</script>
This is a CORS problem. Add:
sourceCrossOrigin: function() { return "anonymous"; }To your Picture settings.
Working example: https://codepen.io/simonsarris/pen/xLNXEZ