Adds fn to checkIsMaskEmpty, tidy

This commit is contained in:
psychedelicious 2022-10-27 23:55:59 +11:00
parent 00b5466f0d
commit 3ce60161d2
4 changed files with 49 additions and 7 deletions

View File

@ -114,7 +114,7 @@ export const frontendToBackendParameters = (
generationParameters.strength = img2imgStrength;
generationParameters.fit = false;
const maskDataURL = generateMask(maskImageElement, lines, boundingBox);
const maskDataURL = generateMask(maskImageElement, lines);
generationParameters.init_mask = maskDataURL.split(
'data:image/png;base64,'

View File

@ -0,0 +1,47 @@
import Konva from 'konva';
import { MaskLine } from '../inpaintingSlice';
/**
* Converts canvas into pixel buffer and checks if it is empty (all pixels full alpha).
*/
const checkIsMaskEmpty = (image: HTMLImageElement, lines: MaskLine[]) => {
const offscreenContainer = document.createElement('div');
const { width, height } = image;
const stage = new Konva.Stage({
container: offscreenContainer,
width: width,
height: height,
});
const layer = new Konva.Layer();
stage.add(layer);
lines.forEach((line) =>
layer.add(
new Konva.Line({
points: line.points,
stroke: 'rgb(255,255,255)',
strokeWidth: line.strokeWidth * 2,
tension: 0,
lineCap: 'round',
lineJoin: 'round',
shadowForStrokeEnabled: false,
globalCompositeOperation:
line.tool === 'brush' ? 'source-over' : 'destination-out',
})
)
);
offscreenContainer.remove();
const pixelBuffer = new Uint32Array(
layer.getContext().getImageData(0, 0, width, height).data.buffer
);
return !pixelBuffer.some((color) => color !== 0);
};
export default checkIsMaskEmpty;

View File

@ -1,5 +1,4 @@
import Konva from 'konva';
import { IRect } from 'konva/lib/types';
import { MaskLine } from '../inpaintingSlice';
/**
@ -12,11 +11,7 @@ import { MaskLine } from '../inpaintingSlice';
* drawing the mask and compositing everything correctly to output a valid
* mask image.
*/
const generateMask = (
image: HTMLImageElement,
lines: MaskLine[],
boundingBox: IRect
) => {
const generateMask = (image: HTMLImageElement, lines: MaskLine[]) => {
const { width, height } = image;
const offscreenContainer = document.createElement('div');