imageMaskFix.js

/**
 * temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
 * @see https://github.com/gradio-app/gradio/issues/1721
 */
function imageMaskResize() {
    const canvases = gradioApp().querySelectorAll(
        "#img2maskimg .touch-none canvas",
    );
    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);
        return;
    }

    const w = previewImage.width;
    const h = previewImage.height;
    const nw = previewImage.naturalWidth;
    const nh = previewImage.naturalHeight;
    const portrait = nh > nw;

    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) => {
        c.style.width = c.style.height = "";
        c.style.maxWidth = "100%";
        c.style.maxHeight = "100%";
        c.style.objectFit = "contain";
    });
}

onAfterUiUpdate(imageMaskResize);
window.addEventListener("resize", imageMaskResize);