如何从 TUI Image Editor 获取 base64 图像？

Question

你好，我在使用和编辑 api 方面是新手，我对 TUI 的图像编辑器有点难过。

我正在尝试将图像数据作为变量获取，以便我可以将其单独上传到网站，而不仅仅是将其下载到计算机上。

我正在使用这个人的 tui 版本。 我也尝试了其他方法，但它们对我来说并不完全奏效。

     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>

尝试使用其他指南更改代码，但现在显示此错误

更改代码

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

添加了一些虚假陈述，以便可以发送 object 表格。

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;
    });
});