How to get the base64 image from TUI Image Editor?

Question

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>

Tried to change the code by using other guides but now it shows this error

Changed code

var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
    includeUI: {
        loadImage: {
            path: 'img/sampleImage2.png',
            name: 'SampleImage',
        },
        theme: blackTheme,
        initMenu: 'filter',
        menuBarPosition: 'left'
    },
    cssMaxWidth: 700,
    cssMaxHeight: 1000,
    usageStatistics: false
});

window.onresize = function() {
    imageEditor.ui.resizeEditor();
}

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}


jQuery(document).ready(function ($) {

    $('.tui-image-editor-download-btn').on('click', function (e) {

        var blob = dataURLtoBlob(imageEditor.toDataURL());

        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');

        $.ajax({
            url: '/files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});

    </script>

Answer 1

Added in some false statements so that the object form can be sent.

jQuery(document).ready(function ($) {

    $('.tui-image-editor-download-btn').on('click', function (e) {

        var blob = dataURLtoBlob(imageEditor.toDataURL());

        var formData = new FormData();
        formData.append('croppedImage', blob, 'sampleimage.png');

        $.ajax({
            contentType: false, //added
            processData: false, //added
            url: '/files/upload_files/', // upload url
            method: "POST",
            data: formData,
            success: function (data) {
                alert('UPLOADED SUCCESSFULLY, PLEASE TRY AGAIN...');
            },
            error: function(xhr, status, error) {
                alert('UPLOAD FAILED, PLEASE TRY AGAIN...');
            }
        });
        return false;
    });
});