diff options
Diffstat (limited to 'javascript/imageMaskFix.js')
-rw-r--r-- | javascript/imageMaskFix.js | 26 |
1 files changed, 12 insertions, 14 deletions
diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 9fe7a603..3c9b8a6f 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -2,20 +2,18 @@ * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668 * @see https://github.com/gradio-app/gradio/issues/1721 */ -window.addEventListener( 'resize', () => imageMaskResize()); function imageMaskResize() { const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas'); - if ( ! canvases.length ) { - canvases_fixed = false; - window.removeEventListener( 'resize', imageMaskResize ); - return; + if (!canvases.length) { + window.removeEventListener('resize', imageMaskResize); + return; } const wrapper = canvases[0].closest('.touch-none'); const previewImage = wrapper.previousElementSibling; - if ( ! previewImage.complete ) { - previewImage.addEventListener( 'load', () => imageMaskResize()); + if (!previewImage.complete) { + previewImage.addEventListener('load', imageMaskResize); return; } @@ -24,22 +22,22 @@ function imageMaskResize() { const nw = previewImage.naturalWidth; const nh = previewImage.naturalHeight; const portrait = nh > nw; - const factor = portrait; - const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw); - const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh); + const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw); + const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh); wrapper.style.width = `${wW}px`; wrapper.style.height = `${wH}px`; wrapper.style.left = `0px`; wrapper.style.top = `0px`; - canvases.forEach( c => { + canvases.forEach(c => { c.style.width = c.style.height = ''; c.style.maxWidth = '100%'; c.style.maxHeight = '100%'; c.style.objectFit = 'contain'; }); - } - - onUiUpdate(() => imageMaskResize()); +} + +onUiUpdate(imageMaskResize); +window.addEventListener('resize', imageMaskResize); |