如何從 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;
    });
});