Question

图表包含来自远程服务器的图像。当使用diagram.makeImage（）将图表导出为png时，它会从远程服务器中排除图像。但它与本地图像一起工作正常。

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>

Answer 1

这是一个CORS问题。添加：

sourceCrossOrigin: function() { return "anonymous"; }

到你的图片设置。

            $(go.Picture, "https://cdn0.iconfinder.com/data/icons/communication-technology/500/black_envelope-128.png",
                { sourceCrossOrigin: function() { return "anonymous"; }, width: 128, height: 128 }
            )

工作示例：https://codepen.io/simonsarris/pen/xLNXEZ

GoJs - 导出包含远程图像的画布图的图像不包括远程图像

1 个答案: