GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。

點(diǎn)擊下載GoJS最新版

GoJS具有用于創(chuàng)建圖像的兩個(gè)功能：Diagram.makeImageData，它輸出一個(gè)Base64圖像數(shù)據(jù)串，和Diagram.makeImage，這是一個(gè)方便的功能調(diào)用Diagram.makeImageData并返回一個(gè)新HTMLImageElement與圖像數(shù)據(jù)作為其源。這兩個(gè)函數(shù)具有相同的單個(gè)參數(shù)，即JavaScript對(duì)象，其中包含幾個(gè)可定義的屬性，在文檔中進(jìn)行了枚舉。
該頁(yè)面幾乎與制作SVG上的頁(yè)面相同，該頁(yè)面顯示了如何渲染SVG元素而不是PNG圖像。

myDiagram.makeImage（）;

myDiagram.makeImage({
  scale: 1
});

myDiagram.makeImage({
  scale: 2
});

myDiagram.makeImage({
  size: new go.Size(100,100)
});

myDiagram.makeImage（{
   size：new go.Size（100，NaN）
}）;

 myPartsList = new go.List();
  myPartsList.add(myDiagram.findNodeForKey("Beta"));
  myPartsList.add(myDiagram.findNodeForKey("Delta"));
myDiagram.makeImage({
  parts: myPartsList
});

myDiagram.makeImage（{
   parts：myDiagram.links
}）;

myDiagram.makeImage({
  scale: 1.5,
  size: new go.Size(100,100)
});

myDiagram.makeImage（{
   scale：9，
   maxSize：new go.Size（600，NaN）
}）;

myDiagram.makeImage({
  position: new go.Point(20,20),
  size: new go.Size(50,50)
});

myDiagram.makeImage（{
   size：new go.Size（NaN，250），
   background：“ rgba（  0，255，0，0.5 ）” //半透明的綠色背景
}）;

在下面的代碼中，我們使用文檔邊界將Diagram分成四個(gè)相等的部分，從而在每個(gè)部分中制作出四個(gè)圖像。通過(guò)這種方式，我們可以為分頁(yè)，制作圖庫(kù)或打印目的準(zhǔn)備圖像。創(chuàng)建的四個(gè)圖像如下所示。

var d = myDiagram.documentBounds;
    var halfWidth = d.width / 2;
    var halfHeight = d.height / 2;
    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img); // Adds the image to a DIV below

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y+ halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y + halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

我們可以設(shè)置參數(shù)對(duì)象的類型和詳細(xì)信息屬性，以檢索不同種類的圖像。唯一受廣泛支持的類型是“ image / jpeg”。jpeg的詳細(xì)信息通過(guò)使用0到1之間的值（包括0和1）來(lái)確定其質(zhì)量。Jpegs通常不用于圖表，因?yàn)樗鼈兊挠袚p壓縮會(huì)導(dǎo)致文本不可讀。

下圖是輸出的jpeg。請(qǐng)注意透明背景如何變?yōu)楹谏驗(yàn)閖peg格式不支持alpha透明，并且HTML5畫布的默認(rèn)狀態(tài)是完全透明的黑色像素rgba（0,0,0,0）。

myDiagram.makeImage（{
   scale：1，
   type：“ image / jpeg”
}）;

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg"
});

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg",
  details: 0.05
});

下載圖像