API call in js to return image

I am working on js web app and it is my first time working on any js app. After calling an API web app is not showing any image on overlay screen but the API is returning an image.

Html code

<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>

I asked GPT to write code and this is what it returned:

js code

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

and flask API reponse.

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

You need to sign in to view this answers

Related Post