js中调用API返回图片

Question

我正在开发 js web 应用程序，这是我第一次开发任何 js 应用程序。调用 API 后，Web 应用程序不会在覆盖屏幕上显示任何图像，但 API 会返回图像。

HTML代码

<input type="file" id="imageUpload" accept="image/*">
                <button id="uploadButton">Upload Image</button>
    <button id="openOverlayButton">Open Overlay</button>

    <div id="overlay" style="display: none;">
        <button id="closeOverlayButton">×</button>
        <div id="overlayContainer">
            <canvas id="renderCanvas"></canvas>
            <img id="overlayImage" src="" alt="Processed Image Overlay">
                        <div id="imageUploadContainer">
                
            </div>
            <div id="cameraControls">
                <div class="slider-container">
                    <span class="slider-label">Rotation</span>
                    <input type="range" id="rotationSlider" class="camera-slider" min="0" max="360" value="0" step="1">
                </div>
            </div>
        </div>
    </div>

我要求 GPT 编写代码，这就是它返回的内容：

js代码

function handleImageUpload() {
    const file = imageUpload.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('image', file);

        // Make an API request
        fetch('http://127.0.0.1:5000/segment', {
            method: 'POST',
            body: formData,
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json(); // Parse the JSON response
        })
        .then(data => {
            // Get the base64 encoded image
            const imageBase64 = data.image;

            // Show the overlay
            const overlay = document.getElementById('overlay');
            overlay.style.display = 'block';

            // Show the processed image in the img element
            const processedImage = document.getElementById('processedImage');
            processedImage.src = `data:image/jpeg;base64,${imageBase64}`; // Use the correct MIME type
            processedImage.style.display = 'block'; // Make sure the image is displayed

            // Optionally, hide the canvas if it's not needed
            const renderCanvas = document.getElementById('renderCanvas');
            renderCanvas.style.display = 'none';

            // Optionally hide the overlay image (if applicable)
            document.getElementById('overlayImage').style.display = 'none';
        })
        .catch(error => {
            console.error('Error during API call:', error);
        });
    } else {
        alert('Please upload an image');
    }
}

// Attach the event listener to the upload button
uploadButton.addEventListener('click', handleImageUpload);

// Add event listener to close the overlay
document.getElementById('closeOverlayButton').addEventListener('click', () => {
    document.getElementById('overlay').style.display = 'none';
});

和 Flask API 响应。

return jsonify({
            'image': image_base64,
            'angle': float(angle)
        })   

Answer 1

您的 html 包含 id="overlayImage" 的图像：

<img id="overlayImage" src="" alt="Processed Image Overlay">

虽然 javascript 为不同的 id 设置图像，但您的 html 代码中不存在该图像 (

processedImage

):

// Show the processed image in the img element
const processedImage = document.getElementById('processedImage');
processedImage.src = `data:image/jpeg;base64,${imageBase64}`; // Use the correct MIME type
processedImage.style.display = 'block';

此外，您稍后将

overlayImage

设置为

display:none

：

// Optionally hide the overlay image (if applicable)
document.getElementById('overlayImage').style.display = 'none';

如果这是预期的行为，您必须将

<img id="processedImage" />

添加到您的 html 代码中。或者更改 javascript 以使用实际图像设置

overlayImage

而不是设置

display = none