How to get the base64 image from TUI Image Editor?


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 () {
document.querySelector('#downloadButton').addEventListener('click', () => {
  const myImage = instance.toDataURL();
  document.getElementById("url").innerHTML = myImage; 

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


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?