Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Overbill1683
Stable Diffusion Webui
提交
2d271c0e
S
Stable Diffusion Webui
项目概览
Overbill1683
/
Stable Diffusion Webui
12 个月 前同步成功
通知
1779
Star
81
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
分析
仓库
DevOps
项目成员
Pages
S
Stable Diffusion Webui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Pages
分析
分析
仓库分析
DevOps
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
提交
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
2d271c0e
编写于
9月 22, 2022
作者:
D
DepFA
提交者:
GitHub
9月 22, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add aspect ratio overlay js
上级
4985d7cd
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
124 addition
and
0 deletion
+124
-0
javascript/aspectRatioOverlay.js
javascript/aspectRatioOverlay.js
+124
-0
未找到文件。
javascript/aspectRatioOverlay.js
0 → 100644
浏览文件 @
2d271c0e
let
currentWidth
=
null
;
let
currentHeight
=
null
;
let
arFrameTimeout
=
setTimeout
(
function
(){},
0
);
function
dimensionChange
(
e
,
dimname
){
if
(
dimname
==
'
Width
'
){
currentWidth
=
e
.
target
.
value
*
1.0
}
if
(
dimname
==
'
Height
'
){
currentHeight
=
e
.
target
.
value
*
1.0
}
var
inImg2img
=
Boolean
(
gradioApp
().
querySelector
(
"
button.rounded-t-lg.border-gray-200
"
))
if
(
!
inImg2img
){
return
;
}
var
img2imgMode
=
gradioApp
().
querySelector
(
"
input[name=radio-img2img_mode]:checked
"
)
if
(
img2imgMode
){
img2imgMode
=
img2imgMode
.
value
}
else
{
return
;
}
var
redrawImage
=
gradioApp
().
querySelector
(
'
div[data-testid=image] img
'
);
var
inpaintImage
=
gradioApp
().
querySelector
(
'
#img2maskimg div[data-testid=image] img
'
)
var
targetElement
=
null
;
if
(
img2imgMode
==
'
Redraw whole image
'
&&
redrawImage
){
targetElement
=
redrawImage
;
}
else
if
(
img2imgMode
==
'
Inpaint a part of image
'
&&
inpaintImage
){
targetElement
=
inpaintImage
;
}
else
if
(
img2imgMode
==
'
SD upscale
'
&&
redrawImage
){
targetElement
=
redrawImage
;
}
if
(
targetElement
){
var
arPreviewRect
=
gradioApp
().
querySelector
(
'
#imageARPreview
'
);
if
(
!
arPreviewRect
){
arPreviewRect
=
document
.
createElement
(
'
div
'
)
arPreviewRect
.
id
=
"
imageARPreview
"
;
gradioApp
().
getRootNode
().
appendChild
(
arPreviewRect
)
}
var
viewportOffset
=
targetElement
.
getBoundingClientRect
();
viewportscale
=
Math
.
min
(
targetElement
.
clientWidth
/
targetElement
.
naturalWidth
,
targetElement
.
clientHeight
/
targetElement
.
naturalHeight
)
scaledx
=
targetElement
.
naturalWidth
*
viewportscale
scaledy
=
targetElement
.
naturalHeight
*
viewportscale
cleintRectTop
=
(
viewportOffset
.
top
+
window
.
scrollY
)
cleintRectLeft
=
(
viewportOffset
.
left
+
window
.
scrollX
)
cleintRectCentreY
=
cleintRectTop
+
(
targetElement
.
clientHeight
/
2
)
cleintRectCentreX
=
cleintRectLeft
+
(
targetElement
.
clientWidth
/
2
)
viewRectTop
=
cleintRectCentreY
-
(
scaledy
/
2
)
viewRectLeft
=
cleintRectCentreX
-
(
scaledx
/
2
)
arRectWidth
=
scaledx
arRectHeight
=
scaledy
arscale
=
Math
.
min
(
arRectWidth
/
currentWidth
,
arRectHeight
/
currentHeight
)
arscaledx
=
currentWidth
*
arscale
arscaledy
=
currentHeight
*
arscale
arRectTop
=
cleintRectCentreY
-
(
arscaledy
/
2
)
arRectLeft
=
cleintRectCentreX
-
(
arscaledx
/
2
)
arRectWidth
=
arscaledx
arRectHeight
=
arscaledy
arPreviewRect
.
style
.
top
=
arRectTop
+
'
px
'
;
arPreviewRect
.
style
.
left
=
arRectLeft
+
'
px
'
;
arPreviewRect
.
style
.
width
=
arRectWidth
+
'
px
'
;
arPreviewRect
.
style
.
height
=
arRectHeight
+
'
px
'
;
clearTimeout
(
arFrameTimeout
);
arFrameTimeout
=
setTimeout
(
function
(){
arPreviewRect
.
style
.
display
=
'
none
'
;
},
2000
);
arPreviewRect
.
style
.
display
=
'
block
'
;
}
}
onUiUpdate
(
function
(){
var
arPreviewRect
=
gradioApp
().
querySelector
(
'
#imageARPreview
'
);
if
(
arPreviewRect
){
arPreviewRect
.
style
.
display
=
'
none
'
;
}
var
inImg2img
=
Boolean
(
gradioApp
().
querySelector
(
"
button.rounded-t-lg.border-gray-200
"
))
if
(
inImg2img
){
let
inputs
=
gradioApp
().
querySelectorAll
(
'
input
'
);
inputs
.
forEach
(
function
(
e
){
let
parentLabel
=
e
.
parentElement
.
querySelector
(
'
label
'
)
if
(
parentLabel
&&
parentLabel
.
innerText
){
if
(
!
e
.
classList
.
contains
(
'
scrollwatch
'
)){
if
(
parentLabel
.
innerText
==
'
Width
'
||
parentLabel
.
innerText
==
'
Height
'
){
e
.
addEventListener
(
'
input
'
,
function
(
e
){
dimensionChange
(
e
,
parentLabel
.
innerText
)}
)
e
.
classList
.
add
(
'
scrollwatch
'
)
}
if
(
parentLabel
.
innerText
==
'
Width
'
){
currentWidth
=
e
.
value
*
1.0
}
if
(
parentLabel
.
innerText
==
'
Height
'
){
currentHeight
=
e
.
value
*
1.0
}
}
}
})
}
});
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录