How to get the base64 image from TUI Image Editor?

Issue

This Content is from Stack Overflow. Question asked by Gabriel

Hello im new’ish in using and editing api’s and im a bit stumped on TUI’s Image Editor.

I’m trying to get the image data as a variable so that I can upload it separately to a website instead of just downloading it to the computer.

I am using this person’s version of tui. I tried other methods as well but they didn’t quite worked out for me.

     const imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
        includeUI: {
          loadImage: {
            path: 'img/sampleImage2.png',
            name: 'SampleImage',
          },
          theme: blackTheme, // or whiteTheme
          initMenu: 'filter',
          menuBarPosition: 'bottom',
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        usageStatistics: false,
      });
      window.onresize = function () {
        imageEditor.ui.resizeEditor();
      
}   
document.querySelector('#downloadButton').addEventListener('click', () => {
  const myImage = instance.toDataURL();
  document.getElementById("url").innerHTML = myImage; 
});
 </script>

 <p id="url">Test</p>



Solution

Check the Answers

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?