diff --git a/ui/media/css/image-editor.css b/ui/media/css/image-editor.css index 3b88ee4a..6442aed1 100644 --- a/ui/media/css/image-editor.css +++ b/ui/media/css/image-editor.css @@ -214,3 +214,10 @@ .image-editor-popup h4 { text-align: left; } + +.image-editor-popup .load_mask { + display: none; +} +.inpainter .load_mask { + display: flex; +} \ No newline at end of file diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js index e6792cbf..4597e983 100644 --- a/ui/media/js/image-editor.js +++ b/ui/media/js/image-editor.js @@ -117,6 +117,42 @@ const IMAGE_EDITOR_TOOLS = [ ] const IMAGE_EDITOR_ACTIONS = [ + { + id: "load_mask", + name: "Load mask from file", + className: "load_mask", + icon: "fa-regular fa-folder-open", + handler: (editor) => { + let el = document.createElement('input') + el.setAttribute("type", "file") + el.addEventListener("change", function() { + if (this.files.length === 0) { + return + } + + let reader = new FileReader() + let file = this.files[0] + + reader.addEventListener('load', function(event) { + let maskData = reader.result + + editor.layers.drawing.ctx.clearRect(0, 0, editor.width, editor.height) + var image = new Image() + image.onload = () => { + editor.layers.drawing.ctx.drawImage(image, 0, 0, editor.width, editor.height) + } + image.src = maskData + }) + + if (file) { + reader.readAsDataURL(file) + } + }) + + el.click() + }, + trackHistory: true + }, { id: "fill_all", name: "Fill all", @@ -457,6 +493,9 @@ class ImageEditor { var element = document.createElement("div") var icon = document.createElement("i") element.className = "image-editor-button button" + if (action.className) { + element.className += " " + action.className + } icon.className = action.icon element.appendChild(icon) element.append(action.name)