如何从TUI Image Editor获取Base64图片？代码报错求助

核心问题排查 #

你当前代码存在几个关键错误：

• 初始代码里错误使用未定义的instance变量，实际编辑器实例是imageEditor，导致无法获取Base64数据
• 修改后的jQuery AJAX请求缺少必要配置，FormData上传时必须禁用自动数据处理和默认Content-Type设置
• 未添加异常捕获逻辑，无法定位获取图片数据或上传过程中的报错

修正后的完整代码 #

以下是可以正常获取Base64并上传的代码（兼容原生JS和jQuery两种方式）：

方式1：使用原生Fetch API（推荐，无需依赖jQuery） #

// 初始化图片编辑器
const 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();
};

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

// 绑定上传逻辑到下载按钮
document.querySelector('.tui-image-editor-download-btn').addEventListener('click', async function(e) {
    e.preventDefault();
    
    try {
        // 获取编辑后的图片Base64数据
        const imageBase64 = imageEditor.toDataURL();
        console.log('获取到Base64数据:', imageBase64);
        
        // 转换为Blob格式
        const blob = dataURLtoBlob(imageBase64);
        
        // 构建FormData
        const formData = new FormData();
        formData.append('croppedImage', blob, 'edited-image.png');
        
        // 发起上传请求
        const response = await fetch('/files/upload_files/', {
            method: 'POST',
            body: formData
        });
        
        if(response.ok) {
            alert('图片上传成功！');
        } else {
            throw new Error('上传请求返回非成功状态');
        }
    } catch(error) {
        console.error('处理出错:', error);
        alert('图片上传失败，请查看控制台日志');
    }
});

方式2：使用jQuery AJAX（需确保已引入jQuery） #

如果坚持用jQuery，需补充关键配置：

// （初始化编辑器和工具函数部分同上）

jQuery(document).ready(function ($) {
    $('.tui-image-editor-download-btn').on('click', function (e) {
        e.preventDefault();
        
        try {
            const imageBase64 = imageEditor.toDataURL();
            const blob = dataURLtoBlob(imageBase64);
            const formData = new FormData();
            formData.append('croppedImage', blob, 'edited-image.png');
            
            $.ajax({
                url: '/files/upload_files/',
                method: "POST",
                data: formData,
                processData: false, // 禁止jQuery自动处理FormData
                contentType: false, // 禁止自动设置Content-Type
                success: function (data) {
                    alert('图片上传成功！');
                },
                error: function(xhr, status, error) {
                    console.error('上传错误:', error);
                    alert('图片上传失败，请查看控制台日志');
                }
            });
        } catch(error) {
            console.error('处理出错:', error);
            alert('获取图片数据失败');
        }
    });
});

关键修正说明 #

• 实例调用修正：将instance.toDataURL()改为imageEditor.toDataURL()，确保调用正确的编辑器实例方法
• AJAX配置补充：使用jQuery时必须设置processData: false和contentType: false，否则FormData会被错误解析
• 异常捕获：添加try/catch逻辑，捕获获取图片数据和上传过程中的错误，方便排查问题
• 数据验证：通过控制台打印Base64数据，确认是否成功获取编辑后的图片内容

内容的提问来源于stack exchange，提问作者Gabriel