ASP.NET Core 7中如何获取Filerobot Image Editor的imageBase64属性

你遇到的alert(imageData)显示[object Object]是因为直接输出对象时，JavaScript会默认调用对象的toString()方法，结果就是这个字符串。要获取Base64格式的图片数据，直接访问返回对象的imageBase64属性即可。

关键修改点： #

• 在clickHandler函数中，将alert(imageData)改为alert(imageData.imageBase64)，就能显示Base64字符串。
• 为了避免属性不存在导致报错，建议先做存在性判断。

修改后的clickHandler函数： #

function clickHandler() {
    const imageData = filerobotImageEditor.getCurrentImgData(); 
    // 先判断imageData和imageBase64是否存在
    if (imageData && imageData.imageBase64) {
        alert(imageData.imageBase64); // 显示Base64字符串
        console.log(imageData.imageBase64);
        saveEditedImage(imageData); // 或者只传imageBase64到后端
    } else {
        console.error('No image data or imageBase64 found');
    }
}

保存到后端的优化建议： #

如果后端只需要Base64字符串，你可以修改saveEditedImage的参数，直接传入imageData.imageBase64，这样请求体更简洁：

function saveEditedImage(imageBase64) {
    const imageId = @ViewBag.ImageId;
    const apiUrl = `/SaveImage/${imageId}`;
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            // 按需添加授权头
        },
        body: JSON.stringify({ imageBase64: imageBase64 })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok: ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        console.log('Success:', data);
        // 后续成功处理逻辑
    })
    .catch(error => {
        console.error('Error:', error);
        // 后续错误处理逻辑
    });
}

完整修改后的代码片段： #

@{
    var imageUrl = Url.Action("GetImage", new { id = ViewBag.ImageId });
}
<div id="editor_container" class="w-100 h-100"></div>
<input type="button" value="Save" onClick="clickHandler()" />
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
<script>
    const config = {
        source: '@imageUrl',
        onSave: function (editedImageObject, designState) {
            // 按需编写onSave逻辑
        },
        removeSaveButton: true,
        onClose: (closingReason) => {
            console.log('Closing reason', closingReason);
            filerobotImageEditor.terminate();
        },
    }

    const filerobotImageEditor = new FilerobotImageEditor(
        document.querySelector('#editor_container'),
        config,
    );

    filerobotImageEditor.render();

    function clickHandler() {
        const imageData = filerobotImageEditor.getCurrentImgData(); 
        if (imageData && imageData.imageBase64) {
            alert(imageData.imageBase64);
            console.log(imageData);
            saveEditedImage(imageData.imageBase64);
        } else {
            console.error('No image data or imageBase64 found');
        }
    }

    function saveEditedImage(imageBase64) {
        const imageId = @ViewBag.ImageId;
        const apiUrl = `/SaveImage/${imageId}`;
        console.log(imageBase64)
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // 按需添加授权头
            },
            body: JSON.stringify({ imageBase64: imageBase64 })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok: ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('Success:', data);
            // 后续成功处理逻辑
        })
        .catch(error => {
            console.error('Error:', error);
            // 后续错误处理逻辑
        });
    }
</script>

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