GoJs中导出图片或SVG实现的方法是什么

前言： 在GoJs中，我们可以通过导出图片或SVG的方式来实现对画布的保存和共享。GoJs提供了一些方法和工具，允许我们将当前的图形画布导出为图片或者SVG格式的文件。这种功能非常有用，尤其是在需要将GoJs图形展示给其他人或存储到数据库中时。本文将阐述如何在GoJs中实现导出图片或SVG的方法。 一、导出图片： 要在GoJs中导出图片，我们可以使用`Diagram.makeImageData()`方法。

// 导出图片
function exportImage() {
  let imgData = myDiagram.makeImageData({ background:"white", returnType:"blob" });
  let fileName = "diagram.png";
  
  // 创建一个临时链接并下载图片
  let a = document.createElement('a');
  a.href = URL.createObjectURL(imgData);
  a.download = fileName;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

在上述代码中，我们首先使用`makeImageData()`方法将GoJs图形导出为图片数据。在`makeImageData()`方法中，我们可以传递一些参数来设置背景颜色以及返回数据的格式，这里我们将背景设置为白色，并将返回数据的格式设置为`blob`类型。然后，我们通过创建一个HTML链接元素，并将图片数据的URL赋给`href`属性，来生成一个临时链接。最后，我们设置链接的下载属性和样式，并将其添加到`body`元素中。这样，当我们调用`click()`方法时，链接将以`fileName`的名字下载图片文件。之后，我们将链接从文档中移除。

二、导出SVG： 要在GoJs中导出SVG，我们可以使用`Diagram.makeSvg()`方法。

// 导出SVG
function exportSvg() {
  let svgData = myDiagram.makeSvg({ scale: 1 });
  
  // 创建一个临时链接并下载SVG文件
  let fileName = "diagram.svg";
  let svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
  let url = URL.createObjectURL(svgBlob);
  
  let a = document.createElement('a');
  a.href = url;
  a.download = fileName;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

在上述代码中，我们首先使用`makeSvg()`方法将GoJs图形导出为SVG数据。在`makeSvg()`方法中，我们可以设置缩放(scale)参数，此处我们将其设置为1，表示原始大小。然后，我们通过创建一个`Blob`对象将SVG数据转换为SVG Blob。接下来，我们通过使用`URL.createObjectURL()`方法创建一个临时链接，该链接指向SVG Blob的URL。接着，我们创建一个HTML链接元素，并将链接和文件名设置为SVG Blob的URL和名字。最后，我们设置链接的下载属性和样式，将其添加到`body`元素中。当我们调用`click()`方法时，链接将以`fileName`的名字下载SVG文件，并将链接从文档中移除。

总结： 在GoJs中，我们可以使用`makeImageData()`方法将画布导出为图片数据，并通过创建临时链接下载图片；我们还可以使用`makeSvg()`方法将画布导出为SVG数据，并通过创建临时链接下载SVG文件。这两种导出方法非常方便，可以将GoJs图形保存为常见的图片或矢量图形格式，以供其他人使用或进行处理。通过上述介绍的导出图片和导出SVG的方法，我们可以轻松实现这些功能并将GoJs图形保存为文件。