Close
Flask với API và Fetch javascript P1
Mục lục
Flask với API và Fetch javascript
Để chuyển lask với API và Fetch javascript ứng dụng Flask sang API và sử dụng fetch từ phía client để gọi API, chúng ta cần điều chỉnh các routes trong Flask để trả về dữ liệu JSON thay vì render HTML. Bên phía client sẽ sử dụng fetch để gửi yêu cầu và xử lý dữ liệu trả về.
Còn đây là Ajax để lấy
Sử dụng thì được á nhưng mà về sau khi muốn mở rộng thì nên đổi sang API và ajax sẽ chuyển đổi sang fetch
Các bước chính:
- Chuyển các route Flask sang dạng API:Chuyển đổi các route trong Flask để trả về dữ liệu dưới dạng JSON (REST API).
- Chuyển đổi các route trong Flask để trả về dữ liệu dưới dạng JSON (REST API).
- Sử dụng fetch trên client-side để gọi API:Client sẽ sử dụng fetch để gửi yêu cầu POST đến API và hiển thị kết quả ảnh trả về.
- Client sẽ sử dụng fetch để gửi yêu cầu POST đến API và hiển thị kết quả ảnh trả về.
- Chuyển đổi các route trong Flask để trả về dữ liệu dưới dạng JSON (REST API).
- Client sẽ sử dụng fetch để gửi yêu cầu POST đến API và hiển thị kết quả ảnh trả về.
1. Chuyển Flask sang API
Cấu trúc Flask API
import os
import cv2
from flask import Flask, request, jsonify
from matplotlib import pyplot as plt
from werkzeug.utils import secure_filename
app = Flask(__name__)
UPLOAD_FOLDER = 'static/uploads'
PROCESSED_FOLDER = 'static/processed_images'
# Đảm bảo thư mục tồn tại
os.makedirs(UPLOAD_FOLDER, exist_ok=True)
os.makedirs(PROCESSED_FOLDER, exist_ok=True)
# Route để upload ảnh
@app.route('/api/upload', methods=['POST'])
def upload_image():
if 'file' not in request.files:
return jsonify({"error": "No file part"}), 400
file = request.files['file']
if file.filename == '':
return jsonify({"error": "No selected file"}), 400
# Lưu ảnh vào thư mục uploads
if file:
filename = secure_filename(file.filename)
image_path = os.path.join(UPLOAD_FOLDER, filename)
file.save(image_path)
return jsonify({"message": "File uploaded successfully", "image_path": image_path}), 200
# Route để thực hiện transform ảnh
@app.route('/api/transform', methods=['POST'])
def transform_image():
data = request.json
transform_type = data.get('transform')
image_path = data.get('image_path')
if not image_path or not os.path.exists(image_path):
return jsonify({"error": "Invalid image path"}), 400
# Đọc và xử lý ảnh
image = cv2.imread(image_path)
image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
# Áp dụng biến đổi dựa trên loại được chọn
if transform_type == 'horizontal_flip':
image = cv2.flip(image, 1)
elif transform_type == 'vertical_flip':
image = cv2.flip(image, 0)
elif transform_type == 'rotate_90':
image = cv2.rotate(image, cv2.ROTATE_90_CLOCKWISE)
# Lưu ảnh đã xử lý vào thư mục processed_images
processed_image_path = os.path.join(PROCESSED_FOLDER, 'processed_image.jpg')
plt.imsave(processed_image_path, image)
return jsonify({"message": "Image transformed successfully", "processed_image_path": processed_image_path}), 200
2. Client-side: Gọi API với Fetch
Bên phía client, chúng ta sẽ sử dụng fetch để gọi API. Khi ảnh được tải lên hoặc khi một nút transform được nhấn, fetch sẽ gửi yêu cầu đến Flask API.
HTML + JavaScript sử dụng fetch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Transformations</title>
<script>
// Hàm để upload ảnh
function uploadImage() {
const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.image_path) {
// Hiển thị ảnh sau khi upload thành công
document.getElementById('image').src = data.image_path;
document.getElementById('imagePath').value = data.image_path;
} else {
console.error(data.error);
}
})
.catch(error => console.error('Error:', error));
}
// Hàm để áp dụng transform ảnh
function applyTransform(transformType) {
const imagePath = document.getElementById('imagePath').value;
fetch('/api/transform', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
transform: transformType,
image_path: imagePath
})
})
.then(response => response.json())
.then(data => {
if (data.processed_image_path) {
// Hiển thị ảnh sau khi biến đổi
document.getElementById('image').src = data.processed_image_path;
} else {
console.error(data.error);
}
})
.catch(error => console.error('Error:', error));
}
</script>
</head>
<body>
<div class="container">
<h1>Upload and Transform Image</h1>
<!-- Form để tải lên ảnh -->
<input type="file" id="fileInput" accept="image/*">
<button onclick="uploadImage()">Upload</button>
<!-- Ẩn đường dẫn ảnh -->
<input type="hidden" id="imagePath" value="">
<!-- Các nút transform -->
<button onclick="applyTransform('horizontal_flip')">Horizontal Flip</button>
<button onclick="applyTransform('vertical_flip')">Vertical Flip</button>
<button onclick="applyTransform('rotate_90')">Rotate 90</button>
<!-- Hiển thị ảnh -->
<div>
<img id="image" src="" alt="Image will appear here" style="max-width: 100%; height: auto;">
</div>
</div>
</body>
</html>
3. Giải thích
- Flask API:/api/upload: API để tải lên ảnh, trả về đường dẫn của ảnh gốc sau khi upload./api/transform: API để áp dụng các phép biến đổi ảnh, trả về đường dẫn của ảnh đã xử lý.
- /api/upload: API để tải lên ảnh, trả về đường dẫn của ảnh gốc sau khi upload.
- /api/transform: API để áp dụng các phép biến đổi ảnh, trả về đường dẫn của ảnh đã xử lý.
- Client-side:uploadImage(): Sử dụng fetch để tải lên ảnh với FormData. Sau khi tải lên, server trả về đường dẫn của ảnh, và ảnh được hiển thị trong img tag.applyTransform(): Gọi API /api/transform với loại biến đổi và đường dẫn của ảnh. Sau khi server xử lý, ảnh đã biến đổi được hiển thị lên.
- uploadImage(): Sử dụng fetch để tải lên ảnh với FormData. Sau khi tải lên, server trả về đường dẫn của ảnh, và ảnh được hiển thị trong img tag.
- applyTransform(): Gọi API /api/transform với loại biến đổi và đường dẫn của ảnh. Sau khi server xử lý, ảnh đã biến đổi được hiển thị lên.
Flask API:
- /api/upload: API để tải lên ảnh, trả về đường dẫn của ảnh gốc sau khi upload.
- /api/transform: API để áp dụng các phép biến đổi ảnh, trả về đường dẫn của ảnh đã xử lý.
Client-side:
- uploadImage(): Sử dụng fetch để tải lên ảnh với FormData. Sau khi tải lên, server trả về đường dẫn của ảnh, và ảnh được hiển thị trong img tag.
- applyTransform(): Gọi API /api/transform với loại biến đổi và đường dẫn của ảnh. Sau khi server xử lý, ảnh đã biến đổi được hiển thị lên.
4. Tóm tắt:
- API-first: Ứng dụng Flask giờ đây chỉ trả về dữ liệu JSON qua API.
- Client-side fetching: Sử dụng fetch từ phía client để tải lên ảnh và áp dụng các biến đổi.
- Tối ưu UI/UX: Người dùng có thể tải ảnh lên và áp dụng các biến đổi ảnh trực tiếp từ giao diện mà không cần tải lại trang.
Leave A Comment