FilesExpand file tree

 master

/

imageMaskFix.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

43 lines (36 loc) · 1.32 KB

 master

/

imageMaskFix.js

Copy path

Top

File metadata and controls

• Code
• Blame

43 lines (36 loc) · 1.32 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

/**

* 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);