mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: Export API's to export the drawing to canvas, svg and blob (#3258)
* feat: Export utilities from package/utils * update * fix * collapsible * Update README.md * update change * update * fix * Apply suggestions from code review Co-authored-by: David Luzar <luzar.david@gmail.com> * Apply suggestions from code review Co-authored-by: David Luzar <luzar.david@gmail.com> * update * Apply suggestions from code review Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
parent
84a1863233
commit
edc62c550a
4 changed files with 117 additions and 11 deletions
|
@ -6,10 +6,11 @@ import { getDefaultAppState } from "../appState";
|
|||
import { AppState } from "../types";
|
||||
import { ExcalidrawElement } from "../element/types";
|
||||
import { getNonDeletedElements } from "../element";
|
||||
import { restore } from "../data/restore";
|
||||
|
||||
type ExportOpts = {
|
||||
elements: readonly ExcalidrawElement[];
|
||||
appState?: Omit<AppState, "offsetTop" | "offsetLeft">;
|
||||
appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
|
||||
getDimensions: (
|
||||
width: number,
|
||||
height: number,
|
||||
|
@ -18,17 +19,22 @@ type ExportOpts = {
|
|||
|
||||
export const exportToCanvas = ({
|
||||
elements,
|
||||
appState = getDefaultAppState(),
|
||||
appState,
|
||||
getDimensions = (width, height) => ({ width, height, scale: 1 }),
|
||||
}: ExportOpts) => {
|
||||
const { elements: restoredElements, appState: restoredAppState } = restore(
|
||||
{ elements, appState },
|
||||
null,
|
||||
);
|
||||
const {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
shouldAddWatermark,
|
||||
} = restoredAppState;
|
||||
return _exportToCanvas(
|
||||
getNonDeletedElements(elements),
|
||||
{ ...appState, offsetTop: 0, offsetLeft: 0 },
|
||||
{
|
||||
exportBackground: appState.exportBackground ?? true,
|
||||
viewBackgroundColor: appState.viewBackgroundColor ?? "#FFF",
|
||||
shouldAddWatermark: appState.shouldAddWatermark ?? false,
|
||||
},
|
||||
getNonDeletedElements(restoredElements),
|
||||
{ ...restoredAppState, offsetTop: 0, offsetLeft: 0 },
|
||||
{ exportBackground, viewBackgroundColor, shouldAddWatermark },
|
||||
(width: number, height: number) => {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ret = getDimensions(width, height);
|
||||
|
@ -81,8 +87,12 @@ export const exportToSvg = ({
|
|||
exportPadding?: number;
|
||||
metadata?: string;
|
||||
}): SVGSVGElement => {
|
||||
return _exportToSvg(getNonDeletedElements(elements), {
|
||||
...appState,
|
||||
const { elements: restoredElements, appState: restoredAppState } = restore(
|
||||
{ elements, appState },
|
||||
null,
|
||||
);
|
||||
return _exportToSvg(getNonDeletedElements(restoredElements), {
|
||||
...restoredAppState,
|
||||
exportPadding,
|
||||
metadata,
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue