mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
support embedding scene data to PNG/SVG (#2219)
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
parent
7618ca48d7
commit
5950fa9a40
20 changed files with 329 additions and 27 deletions
|
@ -19,6 +19,8 @@ import { serializeAsJSON } from "./json";
|
|||
import { ExportType } from "../scene/types";
|
||||
import { restore } from "./restore";
|
||||
import { ImportedDataState } from "./types";
|
||||
import { MIME_TYPES } from "../constants";
|
||||
import { stringToBase64 } from "../base64";
|
||||
|
||||
export { loadFromBlob } from "./blob";
|
||||
export { saveAsJSON, loadFromJSON } from "./json";
|
||||
|
@ -300,11 +302,21 @@ export const exportCanvas = async (
|
|||
return window.alert(t("alerts.cannotExportEmptyCanvas"));
|
||||
}
|
||||
if (type === "svg" || type === "clipboard-svg") {
|
||||
let metadata = "";
|
||||
|
||||
if (appState.exportEmbedScene && type === "svg") {
|
||||
metadata += `<!-- payload-type:${MIME_TYPES.excalidraw} -->`;
|
||||
metadata += "<!-- payload-start -->";
|
||||
metadata += await stringToBase64(serializeAsJSON(elements, appState));
|
||||
metadata += "<!-- payload-end -->";
|
||||
}
|
||||
|
||||
const tempSvg = exportToSvg(elements, {
|
||||
exportBackground,
|
||||
viewBackgroundColor,
|
||||
exportPadding,
|
||||
shouldAddWatermark,
|
||||
metadata,
|
||||
});
|
||||
if (type === "svg") {
|
||||
await fileSave(new Blob([tempSvg.outerHTML], { type: "image/svg+xml" }), {
|
||||
|
@ -330,8 +342,22 @@ export const exportCanvas = async (
|
|||
|
||||
if (type === "png") {
|
||||
const fileName = `${name}.png`;
|
||||
tempCanvas.toBlob(async (blob: any) => {
|
||||
tempCanvas.toBlob(async (blob) => {
|
||||
if (blob) {
|
||||
if (appState.exportEmbedScene) {
|
||||
const { default: tEXt } = await import("png-chunk-text");
|
||||
const { default: encodePng } = await import("png-chunks-encode");
|
||||
const { default: decodePng } = await import("png-chunks-extract");
|
||||
const chunks = decodePng(new Uint8Array(await blob.arrayBuffer()));
|
||||
const metadata = tEXt.encode(
|
||||
MIME_TYPES.excalidraw,
|
||||
serializeAsJSON(elements, appState),
|
||||
);
|
||||
// insert metadata before last chunk (iEND)
|
||||
chunks.splice(-1, 0, metadata);
|
||||
blob = new Blob([encodePng(chunks)], { type: "image/png" });
|
||||
}
|
||||
|
||||
await fileSave(blob, {
|
||||
fileName: fileName,
|
||||
extensions: [".png"],
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue