Adds annotations to Mirador 4 implementation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
astanley dc3cc1cb13 initial commit 1 week ago
..
node_modules initial commit 1 week ago
react-konva-to-svg initial commit 1 week ago
LICENSE initial commit 1 week ago
README.md initial commit 1 week ago
package.json initial commit 1 week ago

README.md

react-konva-to-svg

Extend Konva's functionality to export stages as SVG. Enhance the quality of exported images with SVG format.

GitHub License Build Size Version Downloads

Features

  • Export Konva stages to SVG format.
  • Asynchronous export with progress tracking.
  • Before and after export callbacks for custom processing.
  • Flexible context with a function that handles Konva stage objects.
  • Export results as text SVG or Blob SVG.

Table of Contents

Installation

You can install react-konva-to-svg using npm, yarn, or directly from GitHub.

  • npm: npm install react-konva-to-svg
  • yarn: yarn add react-konva-to-svg
  • GitHub: GitHub Repository

Usage

To use react-konva-to-svg, import the library and utilize the exportStageSVG function with your Konva stage object. This function allows you to customize the export process.

exportStageSVG(stage, blob, options)

  • stage: The Konva stage object you want to export.
  • blob (optional): Set to true to export as Blob SVG, or false (default) to export as text SVG.
  • options (optional): An object containing the following callbacks:
    • onBefore: A callback function called before export. Receives an array [stage, layer] as an argument.
    • onAfter: A callback function called after export. Receives an array [stage, layer] as an argument.

Example usage:

import { exportStageSVG } from 'react-konva-to-svg';

// Example usage
const stage = /* your Konva stage */;
const result = await exportStageSVG(stage, false, {
  onBefore: ([stage, layer]) => {
    // Perform actions before export
  },
  onAfter: ([stage, layer]) => {
    // Perform actions after export
  },
});

Demo

Explore a live demo of react-konva-to-svg in action: Demo