我正在开发 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)
})
您的 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