英文:
How to show image from body of post request in flask api?
问题
您正在尝试从浏览器/HTML画布中捕获的图像进行显示。用户基本上会绘制一些东西，然后我想将其发送到我的Flask API，以便我可以进一步使用OpenCV处理它，但我在仅显示图像方面遇到了问题。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Tool</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Drawing Tool</h1>
<canvas id="canvas" width="400" height="300"></canvas>
<button id="clear-button">Clear</button>
<button id="submit-button">Submit</button>
<script src="index.js"></script>
</body>
</html>
index.js：
submitButton.addEventListener('click', function (e) {
canvas.toBlob((blob) => {
var formData = new FormData()
formData.append('image', blob, 'image.jpg')
fetch('http://localhost:105/sendImg', {
method: "POST",
body: formData
})
.then(response =>
console.log(response)
)
.catch(err =>
console.log(err)
)
}, 'image/jpeg', 0.95);
});
server.py：
app = Flask(__name__)
CORS(app)
@app.route('/sendImg', methods=['POST'])
def showImage():
file = request.files['image']
file.save('image.jpg')
with open('image.jpg', 'rb') as f:
image = Image.open(io.BytesIO(f.read()))
image.save('processed_image.jpg')
image.show()
return 'OK'
请注意，我已经将HTML、JavaScript和Python代码的翻译提供给您，不包括代码的其他内容。如果您需要任何进一步的帮助，请随时提出。
英文:
I am trying to display the image captured from the browser/html canvas. A user would basically draw something, and I want to send it to my flask api so i can further process it with opencv, but i am having trouble just displaying the image.
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<title>Drawing Tool</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Drawing Tool</h1>
<canvas id="canvas" width="400" height="300"></canvas>
<button id="clear-button">Clear</button>
<button id="submit-button">Submit</button>
<script src="index.js"></script>
</body>
</html>
index.js
submitButton.addEventListener('click', function (e) {
canvas.toBlob((blob) => {
var formData = new FormData()
formData.append('image', blob, 'image.jpg')
fetch('http://localhost:105/sendImg', {
method: "POST",
body: formData
})
.then(response =>
console.log(response)
)
.catch(err =>
console.log(err)
)
}, 'image/jpeg', 0.95);
});
server.py
app = Flask(__name__)
CORS(app)
@app.route('/sendImg', methods=['POST'])
def showImage():
file = request.files['image']
file.save('image.jpg')
with open('image.jpg', 'rb') as f:
image = Image.open(io.BytesIO(f.read()))
image.save('processed_image.jpg')
image.show()
return 'OK'
答案1
得分: 0
I tried your code and, at least on my environment (see at the bottom for more details), it worked after I added a few pieces here and there that were missing from your examples, I assume because your examples were/are part of a bigger application.
How I made it work
The additions and changes:
- In the HTML, I added a script element to the end of the body element to draw something on the canvas, and I added a piece of code to convert the canvas to an image element that I show on the same HTML page for verification:
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// Draw circle
ctx.arc(120, 120, 100, 0, Math.PI * 2);
ctx.strokeStyle = 'pink';
ctx.fillStyle = 'yellow';
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();
// Add canvas image on the page for verification
canvas.toBlob((blob) => {
const newImg = document.createElement("img");
const url = URL.createObjectURL(blob);
newImg.onload = () => {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
newImg.src = url;
document.body.appendChild(newImg);
});
</script>
- In index.js, I changed the port to the default 5000 and added the following line to the beginning of the file to define the submit button:
const submitButton = document.getElementById('submit-button');
- In server.py, I added the missing imports to the beginning of the file:
from flask import Flask, request
from flask_cors import CORS
from PIL import Image
import io
How I tested it
- I ran the server on the terminal with:
flask -app server run
-
I opened the HTML file in the browser, saw that it drew the circle on the canvas and added the saved image on the page.
-
I then clicked on the submit button and was shown the uploaded image (black background with a pink circle filled with yellow).
Suggestions
In your comment, you mentioned:
When I click the html button, I get an image that pops up but its just a black box. I expect the image to be whatever I drew on the HTML canvas.
It sounds like uploading the image to the Flask server works, so I think the problem is not in Flask.
Because it sounds like drawing is not saved, I would use the verification code part that I added to the index.js to see that the code used to draw on the canvas actually works and that it can be saved as an image. This helps see and verify the result before it is uploaded as a file.
My environment
older macOS<br/>
latest Firefox
Python 3.9.13<br/>
Pip 22.0.4
Flask 2.3.2<br/>
Flask-Cors 3.0.10<br/>
Pillow 9.5.0
英文:
I tried your code and, at least on my environment (see at the bottom for more details), it worked after I added a few pieces here and there that were missing from your examples, I assume because your examples were/are part of a bigger application.
How I made it work
The additions and changes:
-
In the HTML, I added a script element to the end of the body element to draw something on the canvas, and I added a piece of code to convert the canvas to an image element that I show on the same HTML page for verification:
<script> let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); // Draw circle ctx.arc(120, 120, 100, 0, Math.PI * 2); ctx.strokeStyle = 'pink'; ctx.fillStyle = 'yellow'; ctx.lineWidth = 4; ctx.fill(); ctx.stroke(); // Add canvas image on the page for verification canvas.toBlob((blob) => { const newImg = document.createElement("img"); const url = URL.createObjectURL(blob); newImg.onload = () => { // no longer need to read the blob so it's revoked URL.revokeObjectURL(url); }; newImg.src = url; document.body.appendChild(newImg); }); </script> -
In index.js, I changed the port to the default 5000 and added the following line to the beginning of the file to define the submit button:
const submitButton = document.getElementById('submit-button'); -
In server.py, I added the missing imports to the beginning of the file:
from flask import Flask, request from flask_cors import CORS from PIL import Image import io
How I tested it
-
I ran the server on the terminal with:
flask -app server run -
I opened the HTML file in the browser, saw that it drew the circle on the canvas and added the saved image on the page.
-
I then clicked on the submit button and was shown the uploaded image (black background with a pink circle filled with yellow).
Suggestions
In your comment, you mentioned:
> When I click the html button, I get an image that pops up but its just a black box. I expect the image to be whatever I drew on the HTML canvas.
It sounds like uploading the image to the Flask server works, so I think the problem is not in Flask.
Because it sounds like drawing is not saved, I would use the verification code part that I added to the index.js to see that the code used to draw on the canvas actually works and that it can be saved as an image. This helps see and verify the result before it is uploaded as a file.
My environment
older macOS<br/>
latest Firefox
Python 3.9.13<br/>
Pip 22.0.4
Flask 2.3.2<br/>
Flask-Cors 3.0.10<br/>
Pillow 9.5.0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论