how to use multiple image editor for the image editing

[tejas36026]

i have worked with tui image editor and there are some features that tui image editor does not have but glfx.js has how do i combine both of them?
`

<title>0. Design</title>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/magic-wand-js@1.0.0/js/magic-wand.js"></script>

<script src="https://cdn.jsdelivr.net/npm/magic-wand-js@1.0.0/js/magic-wand.js"></script>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>
  
  @import url(http://fonts.googleapis.com/css?family=Noto+Sans);
  html,
  body {
    height: 100%;
    margin: 0;
  }

.wrapper {
width: 400px !important;
height: 350px !important;
overflow: auto !important;
}
.content {
position: relative !important;
}
.canvas {
position: absolute;
}
.canvas:hover {
cursor: default;
}
.picture {
position: absolute;
}
.button {
padding: 4px;
margin: 4px;
border: 1px solid black;
float: left;
}
.button:hover {
background-color: blue;
color: white;
cursor: pointer;
}
#threshold {
width: 95px;
float: left;
}
#file-upload {
display: none;
}
.add-mode {
cursor: copy !important;
}
#imgcanvas {
position: relative;
}

#imgcanvas .wrapper {
position: absolute;
top: 86.5px;
/* left: 50%; /
/ top: calc(333px - var(--img-height) / 2) ; /
left: calc(874px - var(--img-width) / 2) ;
transform: translateX(-50%);
z-index: 9999;
/ width: 400px; /
/ height: 350px; */
overflow: auto;
}

#imgcanvas .content {
position: relative;
}

</style>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.js" ></script> <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js" ></script> <script type="text/javascript" src="https://uicdn.toast.com/tui-color-picker/v2.2.6/tui-color-picker.js" ></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js" ></script> <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script> <script src="glfx.js"></script>

<script>

  let hue_num = 1; 
  var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
    loadImage: {
        path: 'image2.png',
        name: 'SampleImage',
      },
      // theme: blackTheme,
      initMenu: 'filter',
      menuBarPosition: 'bottom',
    },
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    usageStatistics: false,
  });
  window.onresize = function () {
    imageEditor.ui.resizeEditor();
  };  
  setTimeout(() => {
try {
    
    var canvas_glfx = fx.canvas();
    // alert(canvas_glfx)
  alert("ink funciton part 3")
} catch (e) {
    alert(e);
    return;
}

// var image_glfx  = document.getElementById('image');

var image_glfx = imageEditor._graphics.getCanvas();

var texture_glfx = canvas_glfx.texture(image_glfx);

canvas_glfx.draw(texture_glfx).ink(0.95).update();

image_glfx.parentNode.insertBefore(canvas_glfx, image_glfx);
image_glfx.parentNode.removeChild(image_glfx);


        }, 2000);

</script> `