nodes/shadowcz007-comfyui-mixlab-nodes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ing

Browse Source
This commit is contained in:
shadowcz007
2023-12-17 12:26:41 +08:00
parent 9f23172b22
commit 790c22d919
2 changed files with 221 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nodes/ImageNode.py
+17 -5
View File
@@ -909,26 +909,38 @@ class Image3D:
"upload":("THREED",), },
}
RETURN_TYPES = ("IMAGE","MASK",)
# RETURN_NAMES = ("IMAGE",)
RETURN_TYPES = ("IMAGE","MASK","IMAGE",)
RETURN_NAMES = ("IMAGE","MASK","BG_IMAGE",)
FUNCTION = "run"
CATEGORY = "♾️Mixlab/image"
INPUT_IS_LIST = False
OUTPUT_IS_LIST = (False,False,)
OUTPUT_IS_LIST = (False,False,False,)
def run(self,upload):
# print(upload['image'])
image = base64_to_image(upload['image'])
image=image.convert('RGB')
<<<<<<< Updated upstream
mask=image.convert('L')
=======
mask=mask.convert('L')
bg_image=None
if upload['bg_image']:
bg_image = base64_to_image(upload['bg_image'])
bg_image=bg_image.convert('RGB')
bg_image=pil2tensor(bg_image)
>>>>>>> Stashed changes
mask=pil2tensor(mask)
image=pil2tensor(image)
return (image,mask,)
return (image,mask,bg_image,)
web/javascript/image_mixlab.js
+204 -7
View File
@@ -216,6 +216,25 @@ const parseSvg = async svgContent => {
return { data, image: base64, svgElement }
}
function exportModelViewerImage (
modelViewer,
width,
height,
format = 'image/png',
quality = 1.0
) {
const canvas = document.createElement('canvas')
canvas.width = width
canvas.height = height
const context = canvas.getContext('2d')
return new Promise((resolve, reject) => {
context.drawImage(modelViewer, 0, 0, width, height)
resolve(canvas.toDataURL(format, quality))
})
}
app.registerExtension({
name: 'Mixlab.image.SvgImage',
async getCustomWidgets (app) {
@@ -423,11 +442,14 @@ app.registerExtension({
async serializeValue (nodeId, widgetIndex) {
let d = getLocalData('_mixlab_3d_image')
// console.log('serializeValue',d)
if (d) {
let url = d[node.id]
if (d && d[node.id]) {
let { url, bg } = d[node.id]
let base64 = await parseImage(url)
let bg_base64 = await parseImage(bg)
return JSON.parse(JSON.stringify({ image: base64 }))
return JSON.parse(
JSON.stringify({ image: base64, bg_image: bg_base64 })
)
} else {
return {}
}
@@ -446,7 +468,7 @@ app.registerExtension({
orig_nodeCreated?.apply(this, arguments)
const uploadWidget = this.widgets.filter(w => w.name == 'upload')[0]
console.log('3d nodeData', this.inputs)
// console.log('3d nodeData', this.inputs)
const widget = {
type: 'div',
@@ -454,12 +476,13 @@ app.registerExtension({
draw (ctx, node, widget_width, y, widget_height) {
Object.assign(
this.div.style,
get_position_style(ctx, widget_width, 44, node.size[1])
get_position_style(ctx, widget_width, 88, node.size[1])
)
}
}
widget.div = $el('div', {})
widget.div.style.width = `120px`
document.body.appendChild(widget.div)
@@ -510,10 +533,27 @@ app.registerExtension({
</div></model-viewer>`
preview.innerHTML = html
<<<<<<< Updated upstream
const modelViewerVariants = preview.querySelector('model-viewer')
const select = preview.querySelector('.variant')
const capture = preview.querySelector('.capture')
=======
if (that.size[1] < 400) {
that.setSize([that.size[0], that.size[1] + 300])
app.canvas.draw(true, true)
}
const modelViewerVariants = preview.querySelector('model-viewer')
const select = preview.querySelector('.variant')
const bg = preview.querySelector('.bg')
if (modelViewerVariants) {
modelViewerVariants.style.width = `${that.size[0] - 24}px`
modelViewerVariants.style.height = `${that.size[1] - 48}px`
}
>>>>>>> Stashed changes
modelViewerVariants.addEventListener('load', () => {
const names = modelViewerVariants.availableVariants
@@ -530,11 +570,62 @@ app.registerExtension({
select.appendChild(option)
})
<<<<<<< Updated upstream
=======
let timer = null
const delay = 800 // 延迟时间，单位为毫秒
async function checkCameraChange () {
let dd = getLocalData(key)
let w, h
let base64Data
if (dd[that.id]) {
w = dd[that.id].bg_w
h = dd[that.id].bg_h
}
// 在这里触发相机停止变化的事件
// console.log('在这里触发相机停止变化的事件')
// let base64Data = modelViewerVariants.toDataURL()
if (w && h) {
base64Data = await exportModelViewerImage(
modelViewerVariants.displaycanvas,
w,
h
)
} else {
base64Data = modelViewerVariants.toDataURL()
}
const contentType = getContentTypeFromBase64(base64Data)
const blob = await base64ToBlobFromURL(base64Data, contentType)
// const fileBlob = new Blob([e.target.result], { type: file.type });
let url = await uploadImage(blob, '.png')
// console.log(url)
if (!dd[that.id]) dd[that.id] = { url, bg: '' }
dd[that.id] = { ...dd[that.id], url }
setLocalDataOfWin(key, dd)
}
function startTimer () {
if (timer) clearTimeout(timer)
timer = setTimeout(checkCameraChange, delay)
}
modelViewerVariants.addEventListener('camera-change', startTimer)
>>>>>>> Stashed changes
select.addEventListener('input', event => {
modelViewerVariants.variantName =
event.target.value === 'default' ? null : event.target.value
checkCameraChange()
})
<<<<<<< Updated upstream
capture.addEventListener('click', async () => {
let base64Data = modelViewerVariants.toDataURL()
@@ -550,9 +641,84 @@ app.registerExtension({
dd[that.id] = url
setLocalDataOfWin(key, dd)
=======
bg.addEventListener('click', () => {
// 创建一个input元素
var input = document.createElement('input')
input.type = 'file'
// 监听input的change事件
input.addEventListener('change', function () {
// 获取上传的文件
var file = input.files[0]
// 创建一个FileReader对象来读取文件
var reader = new FileReader()
// 监听FileReader的load事件
reader.addEventListener('load', async () => {
let base64 = reader.result
// 将读取的文件内容设置为div的背景
preview.style.backgroundImage = 'url(' + base64 + ')'
const contentType = getContentTypeFromBase64(base64)
const blob = await base64ToBlobFromURL(base64, contentType)
// const fileBlob = new Blob([e.target.result], { type: file.type });
let bg_url = await uploadImage(blob, '.png')
let bg_img = await createImage(base64)
let dd = getLocalData(key)
// console.log(dd[that.id],bg_url)
if (!dd[that.id]) dd[that.id] = { url: '', bg: bg_url }
dd[that.id] = {
...dd[that.id],
bg: bg_url,
bg_w: bg_img.naturalWidth,
bg_h: bg_img.naturalHeight
}
setLocalDataOfWin(key, dd)
// 更新尺寸
let w = that.size[0] - 24,
h = (w * bg_img.naturalHeight) / bg_img.naturalWidth
if (modelViewerVariants) {
modelViewerVariants.style.width = `${w}px`
modelViewerVariants.style.height = `${h}px`
}
preview.style.width = `${w}px`
})
// 读取文件
reader.readAsDataURL(file)
})
// 触发input的点击事件
input.click()
>>>>>>> Stashed changes
})
uploadWidget.value = await uploadWidget.serializeValue()
// 更新尺寸
let dd = getLocalData(key)
// console.log(dd[that.id],bg_url)
if (dd[that.id]) {
const { bg_w, bg_h } = dd[that.id]
if (bg_h && bg_w) {
let w = that.size[0] - 24,
h = (w * bg_h) / bg_w
if (modelViewerVariants) {
modelViewerVariants.style.width = `${w}px`
modelViewerVariants.style.height = `${h}px`
}
preview.style.width = `${w}px`
}
}
}
// 以文本形式读取文件
@@ -563,7 +729,13 @@ app.registerExtension({
let preview = document.createElement('div')
preview.className = 'preview'
<<<<<<< Updated upstream
preview.style = `background:#eee;margin-top: 12px;`
=======
preview.style = `margin-top: 12px;display: flex;
justify-content: center;
align-items: center;background-repeat: no-repeat;background-size: contain;`
>>>>>>> Stashed changes
let upload = inputDiv('_mixlab_3d_image', '3D Model', preview)
@@ -571,6 +743,21 @@ app.registerExtension({
widget.div.appendChild(preview)
this.addCustomWidget(widget)
<<<<<<< Updated upstream
=======
const onResize = this.onResize
this.onResize = function () {
let modelViewerVariants = preview.querySelector('model-viewer')
if (modelViewerVariants) {
modelViewerVariants.style.width = `${this.size[0] - 24}px`
modelViewerVariants.style.height = `${this.size[1] - 48}px`
}
preview.style.width = `${this.size[0] - 12}px`
// console.log(widget.div)
return onResize?.apply(this, arguments)
}
>>>>>>> Stashed changes
const onRemoved = this.onRemoved
this.onRemoved = () => {
upload.remove()
@@ -602,14 +789,24 @@ app.registerExtension({
let dd = getLocalData('_mixlab_3d_image')
let id = node.id
console.log('3dImage load', node.widgets[0], node.widgets)
// console.log('3dImage load', node.widgets[0], node.widgets)
if (!dd[id]) return
let url = dd[id]
let { url, bg } = dd[id]
if (!url) return
// let base64 = await parseImage(url)
<<<<<<< Updated upstream
widget.div.querySelector('.preview').innerHTML = `<img src="${url}"/>`
=======
let pre = widget.div.querySelector('.preview')
pre.style.width = `${node.size[0]}px`
pre.innerHTML = `
${url ? `<img src="${url}" style="width:100%"/>` : ''}
`
pre.style.backgroundImage = 'url(' + bg + ')'
>>>>>>> Stashed changes
const uploadWidget = node.widgets.filter(w => w.name == 'upload')[0]
uploadWidget.value = await uploadWidget.serializeValue()