From 790c22d9190bcc0b02e033a9646fea445fdcd4da Mon Sep 17 00:00:00 2001 From: shadowcz007 Date: Sun, 17 Dec 2023 12:26:41 +0800 Subject: [PATCH] ing --- nodes/ImageNode.py | 22 +++- web/javascript/image_mixlab.js | 211 +++++++++++++++++++++++++++++++-- 2 files changed, 221 insertions(+), 12 deletions(-) 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()