Crop Outpainting saves to content

[Leland]

Outpainting today saves the entire artboard – including image resize handles – even while mostly blank.

Here's a real export:

It means that users have to manually crop down saves to the content every time, or grab the raw images from the internal save directory.

It would be grand if DiffusionBee instead just cropped the height and width to the edges of the content.

[EthanMcKanna]

This is something I was thinking about too. Definitely would save time instead of having to manually scale afterwards.

[divamgupta]

Thats a nice idea. If anyone could send a PR, that will be great

[Polyculturerawks]

Also if saving as a PNG, could it not also have alpha layer?

[Leland]

Thinking about this issue – this is about fitting a minimum bounding rectangle around the drawn content, and then cropping to that box at save. The question is how we make the box.

Naive approach: track coordinates in state, update them when images are changed. Crop to the resulting box at save time.

Stateless approach: at save time, iterate over all Konva objects on the board to calculate bounding box. This will probably be a fair bit of code (and not very Vue-y).

But maybe there's a way to do this without iteration – maybe Konva can do this for us?

• Every new image and Outpainting gets added to a single group. This lets us exclude the background and box from our set of items to measure.
• At save time, we just call Group.getClientRect()
• We then crop the save to that box

Other bits to think about:

• Handling erasing (this is complex and enough of an edge (😉) case that it's probably not worth doing)
• Handling undo (happens automatically with getClientRect)

[divamgupta]

I guess iterating over Konva objects seem like the easiest and cleanest way to go about it.