Merge pull request #302 from cmdr2/canvas-resize

Follow the output aspect ratio in the inpainting editor
This commit is contained in:
cmdr2 2022-10-08 16:55:36 +05:30 committed by GitHub
commit bab86c9ce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 0 deletions

View File

@ -261,6 +261,9 @@ img {
.drawing-board-canvas-wrapper {
background-size: 100% 100%;
}
.drawing-board-controls {
min-width: 273px;
}
.drawing-board-control > button {
background-color: #eee;
border-radius: 3pt;

View File

@ -12,6 +12,7 @@ const SHOW_ONLY_FILTERED_IMAGE_KEY = "showOnlyFilteredImage"
const STREAM_IMAGE_PROGRESS_KEY = "streamImageProgress"
const HEALTH_PING_INTERVAL = 5 // seconds
const MAX_INIT_IMAGE_DIMENSION = 768
const INPAINTING_EDITOR_SIZE = 450
const IMAGE_REGEX = new RegExp('data:image/[A-Za-z]+;base64')
@ -262,6 +263,32 @@ async function healthCheck() {
setStatus('server', 'offline', 'error')
}
}
function resizeInpaintingEditor() {
let widthValue = parseInt(widthField.value)
let heightValue = parseInt(heightField.value)
if (widthValue === heightValue) {
widthValue = INPAINTING_EDITOR_SIZE
heightValue = INPAINTING_EDITOR_SIZE
} else if (widthValue > heightValue) {
heightValue = (heightValue / widthValue) * INPAINTING_EDITOR_SIZE
widthValue = INPAINTING_EDITOR_SIZE
} else {
widthValue = (widthValue / heightValue) * INPAINTING_EDITOR_SIZE
heightValue = INPAINTING_EDITOR_SIZE
}
inpaintingEditorContainer.style.width = widthValue + 'px'
inpaintingEditorContainer.style.height = heightValue + 'px'
inpaintingEditor.opts.enlargeYourContainer = true
inpaintingEditor.opts.size = inpaintingEditor.ctx.lineWidth
inpaintingEditor.resize()
inpaintingEditor.ctx.lineCap = "round"
inpaintingEditor.ctx.lineJoin = "round"
inpaintingEditor.ctx.lineWidth = inpaintingEditor.opts.size
inpaintingEditor.setColor(inpaintingEditor.opts.color)
}
function showImages(req, res, outputContainer, livePreview) {
let imageItemElements = outputContainer.querySelectorAll('.imgItem')
@ -907,6 +934,8 @@ streamImageProgressField.addEventListener('click', handleBoolSettingChange(STREA
streamImageProgressField.checked = isStreamImageProgressEnabled()
diskPathField.addEventListener('change', handleStringSettingChange(DISK_PATH_KEY))
widthField.addEventListener('change', resizeInpaintingEditor)
heightField.addEventListener('change', resizeInpaintingEditor)
saveToDiskField.addEventListener('click', function(e) {
diskPathField.disabled = !this.checked