excalidraw/src/packages/utils
dependabot[bot] d88884466b
chore(deps-dev): bump @babel/core from 7.12.13 to 7.12.16 in /src/packages/utils (#3021)
Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.12.13 to 7.12.16.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.12.16/packages/babel-core)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2021-02-14 09:44:21 +02:00
..
CHANGELOG.md docs: adding PR guidelines for contributors (#2736) 2021-01-06 22:53:12 +02:00
index.js feat: export exportToCanvas in utils (#2583) 2020-12-14 14:11:48 +01:00
package-lock.json chore(deps-dev): bump @babel/core from 7.12.13 to 7.12.16 in /src/packages/utils (#3021) 2021-02-14 09:44:21 +02:00
package.json chore(deps-dev): bump @babel/core from 7.12.13 to 7.12.16 in /src/packages/utils (#3021) 2021-02-14 09:44:21 +02:00
README.md docs: adding PR guidelines for contributors (#2736) 2021-01-06 22:53:12 +02:00
webpack.prod.config.js Add bundle analyzer to webpack behind env variable (#2330) 2020-11-04 20:38:16 +01:00

@excalidraw/utils

Install

npm install @excalidraw/utils

If you prefer Yarn over npm, use this command to install the Excalidraw utils package:

yarn add @excalidraw/utils

API

exportToBlob (async)

Export an Excalidraw diagram to a Blob.

exportToSvg

Export an Excalidraw diagram to a SVGElement.

Usage

Excalidraw utils is published as a UMD (Universal Module Definition). If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module:

import { exportToSvg, exportToBlob } from "@excalidraw/utils";

To use it in a browser directly:

<script src="https://unpkg.com/@excalidraw/utils@0.1.0/dist/excalidraw-utils.min.js"></script>
<script>
  // ExcalidrawUtils is a global variable defined by excalidraw.min.js
  const { exportToSvg, exportToBlob } = ExcalidrawUtils;
</script>

Here's the exportToBlob and exportToSvg functions in action:

const excalidrawDiagram = {
  type: "excalidraw",
  version: 2,
  source: "https://excalidraw.com",
  elements: [
    {
      id: "vWrqOAfkind2qcm7LDAGZ",
      type: "ellipse",
      x: 414,
      y: 237,
      width: 214,
      height: 214,
      angle: 0,
      strokeColor: "#000000",
      backgroundColor: "#15aabf",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      groupIds: [],
      strokeSharpness: "sharp",
      seed: 1041657908,
      version: 120,
      versionNonce: 1188004276,
      isDeleted: false,
      boundElementIds: null,
    },
  ],
  appState: {
    viewBackgroundColor: "#ffffff",
    gridSize: null,
  },
};

// Export the Excalidraw diagram as SVG string
const svg = exportToSvg(excalidrawDiagram);
console.log(svg.outerHTML);

// Export the Excalidraw diagram as PNG Blob URL
(async () => {
  const blob = await exportToBlob({
    ...excalidrawDiagram,
    mimeType: "image/png",
  });

  const urlCreator = window.URL || window.webkitURL;
  console.log(urlCreator.createObjectURL(blob));
})();