Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): simplified konva node to blob/imagedata utils

Browse Source
This commit is contained in:
psychedelicious 2024-06-24 11:11:53 +10:00
parent 5f4a3928d2
commit 9b81860307
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
invokeai/frontend/web/src/features/controlLayers/konva/util.ts
View File

@ -159,21 +159,6 @@ export const downloadBlob = (blob: Blob, fileName: string) => {
a.remove(); a.remove();
}; };
/**
* Gets a Blob from a HTMLCanvasElement.
*/
export const canvasToBlob = async (canvas: HTMLCanvasElement): Promise<Blob> => {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (blob) {
resolve(blob);
return;
}
reject('Unable to create Blob');
});
});
};
/** /**
* Gets an ImageData object from an image dataURL by drawing it to a canvas. * Gets an ImageData object from an image dataURL by drawing it to a canvas.
*/ */
@ -201,24 +186,31 @@ export const dataURLToImageData = async (dataURL: string, width: number, height:
}); });
}; };
export const konvaNodeToCanvas = (node: Konva.Node, bbox?: Rect): HTMLCanvasElement => {
return node.toCanvas({ ...(bbox ?? {}) });
};
/** /**
* Converts a Konva node to a Blob * Converts a Konva node to a Blob
* @param node - The Konva node to convert to a Blob * @param node - The Konva node to convert to a Blob
* @param bbox - The bounding box to crop to * @param bbox - The bounding box to crop to
* @returns A Promise that resolves with Blob of the node cropped to the bounding box * @returns A Promise that resolves with Blob of the node cropped to the bounding box
*/ */
export const konvaNodeToBlob = async (node: Konva.Node, bbox?: Rect): Promise<Blob> => { export const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
return await new Promise<Blob>((resolve) => { return new Promise((resolve) => {
node.toBlob({ canvas.toBlob((blob) => {
callback: (blob) => { assert(blob, 'blob is null');
assert(blob, 'Blob is null');
resolve(blob); resolve(blob);
},
...(bbox ?? {}),
}); });
}); });
}; };
export const canvasToImageData = (canvas: HTMLCanvasElement): ImageData => {
const ctx = canvas.getContext('2d');
assert(ctx, 'ctx is null');
return ctx.getImageData(0, 0, canvas.width, canvas.height);
};
/** /**
* Converts a Konva node to an ImageData object * Converts a Konva node to an ImageData object
* @param node - The Konva node to convert to an ImageData object * @param node - The Konva node to convert to an ImageData object
@ -226,11 +218,19 @@ export const konvaNodeToBlob = async (node: Konva.Node, bbox?: Rect): Promise<Bl
* @returns A Promise that resolves with ImageData object of the node cropped to the bounding box * @returns A Promise that resolves with ImageData object of the node cropped to the bounding box
*/ */
export const konvaNodeToImageData = (node: Konva.Node, bbox?: Rect): ImageData => { export const konvaNodeToImageData = (node: Konva.Node, bbox?: Rect): ImageData => {
// get a dataURL of the bbox'd region const canvas = konvaNodeToCanvas(node, bbox);
const canvas = node.toCanvas({ ...(bbox ?? {}) }); return canvasToImageData(canvas);
const ctx = canvas.getContext('2d'); };
assert(ctx, 'ctx is null');
return ctx.getImageData(0, 0, canvas.width, canvas.height); /**
* Converts a Konva node to a Blob
* @param node - The Konva node to convert to a Blob
* @param bbox - The bounding box to crop to
* @returns A Promise that resolves to the Blob or null,
*/
export const konvaNodeToBlob = (node: Konva.Node, bbox?: Rect): Promise<Blob> => {
const canvas = konvaNodeToCanvas(node, bbox);
return canvasToBlob(canvas);
}; };
/** /**