diff --git a/nodes/ImageNode.py b/nodes/ImageNode.py
index c69af91..13b9ce8 100644
--- a/nodes/ImageNode.py
+++ b/nodes/ImageNode.py
@@ -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,)
diff --git a/web/javascript/image_mixlab.js b/web/javascript/image_mixlab.js
index 55867b3..bcc46f9 100644
--- a/web/javascript/image_mixlab.js
+++ b/web/javascript/image_mixlab.js
@@ -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({
`
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 = `
`
+=======
+ let pre = widget.div.querySelector('.preview')
+ pre.style.width = `${node.size[0]}px`
+ pre.innerHTML = `
+ ${url ? `` : ''}
+ `
+ pre.style.backgroundImage = 'url(' + bg + ')'
+>>>>>>> Stashed changes
const uploadWidget = node.widgets.filter(w => w.name == 'upload')[0]
uploadWidget.value = await uploadWidget.serializeValue()