feat: image support (#4011)

Co-authored-by: Emil Atanasov <heitara@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
David Luzar 2021-10-21 22:05:48 +02:00 committed by GitHub
parent 0f0244224d
commit 163ad1f4c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
85 changed files with 3536 additions and 618 deletions

View file

@ -3,14 +3,16 @@ import {
exportToSvg as _exportToSvg,
} from "../scene/export";
import { getDefaultAppState } from "../appState";
import { AppState } from "../types";
import { AppState, BinaryFiles } from "../types";
import { ExcalidrawElement } from "../element/types";
import { getNonDeletedElements } from "../element";
import { restore } from "../data/restore";
import { MIME_TYPES } from "../constants";
type ExportOpts = {
elements: readonly ExcalidrawElement[];
appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
files: BinaryFiles | null;
getDimensions?: (
width: number,
height: number,
@ -20,6 +22,7 @@ type ExportOpts = {
export const exportToCanvas = ({
elements,
appState,
files,
getDimensions = (width, height) => ({ width, height, scale: 1 }),
}: ExportOpts) => {
const { elements: restoredElements, appState: restoredAppState } = restore(
@ -31,6 +34,7 @@ export const exportToCanvas = ({
return _exportToCanvas(
getNonDeletedElements(restoredElements),
{ ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
files || {},
{ exportBackground, viewBackgroundColor },
(width: number, height: number) => {
const canvas = document.createElement("canvas");
@ -44,22 +48,23 @@ export const exportToCanvas = ({
);
};
export const exportToBlob = (
export const exportToBlob = async (
opts: ExportOpts & {
mimeType?: string;
quality?: number;
},
): Promise<Blob | null> => {
const canvas = exportToCanvas(opts);
const canvas = await exportToCanvas(opts);
let { mimeType = "image/png", quality } = opts;
let { mimeType = MIME_TYPES.png, quality } = opts;
if (mimeType === "image/png" && typeof quality === "number") {
console.warn(`"quality" will be ignored for "image/png" mimeType`);
if (mimeType === MIME_TYPES.png && typeof quality === "number") {
console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
}
// typo in MIME type (should be "jpeg")
if (mimeType === "image/jpg") {
mimeType = "image/jpeg";
mimeType = MIME_TYPES.jpg;
}
quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
@ -78,6 +83,7 @@ export const exportToBlob = (
export const exportToSvg = async ({
elements,
appState = getDefaultAppState(),
files = {},
exportPadding,
}: Omit<ExportOpts, "getDimensions"> & {
exportPadding?: number;
@ -87,10 +93,14 @@ export const exportToSvg = async ({
null,
null,
);
return _exportToSvg(getNonDeletedElements(restoredElements), {
...restoredAppState,
exportPadding,
});
return _exportToSvg(
getNonDeletedElements(restoredElements),
{
...restoredAppState,
exportPadding,
},
files,
);
};
export { serializeAsJSON } from "../data/json";