mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
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:
parent
0f0244224d
commit
163ad1f4c4
85 changed files with 3536 additions and 618 deletions
|
@ -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";
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue