Ứng dụng xử lý ảnh theo lô với điều chỉnh kích thước và chất lượng

Tính năng cho phép người dùng chọn nhiều tệp hình ảnh, sau đó lần lượt thay đổi kích thước và xuất file với độ phân giải mong muốn. Công cụ này đặc biệt hữu ích khi cần chuẩn hóa ảnh CMND hoặc giấy tờ cá nhân.

So sánh thông số ảnh trước và sau xử lý

Giao diện hiển thị kết quả xử lý ảnh

Cấu trúc giao diện chọn ảnh và cài đặt

<div id="imageProcessor">
	<div class="setting-row">
		<label>Tệp ảnh<input type="file" id="fileInput" accept="image/*" multiple></label>
	</div>
	<div class="setting-row">
		<label>Kích thước tối đa<input type="number" id="maxDimension" min="0" value="1200"></label>
		<label>Độ nét![quality](quality-icon.png) <input type="range" id="qualitySlider" min="0" max="1" step="0.01" value="0.75"></label>
	</div>
	<canvas id="outputCanvas" width="1000" height="800" style="border:1px solid #ccc">Không hỗ trợ canvas</canvas>
</div>

Lõi xử lý ảnh theo từng tệp

const canvas = document.getElementById('outputCanvas');
const ctx = canvas.getContext('2d');
const fileInput = document.getElementById('fileInput');
const maxDimInput = document.getElementById('maxDimension');
const qualitySlider = document.getElementById('qualitySlider');

let processingQueue = [];

fileInput.addEventListener('change', (event) => {
	processingQueue = Array.from(event.target.files);
	if (processingQueue.length > 0) {
		processNextImage(processingQueue.shift());
	}
});

function processNextImage(file) {
	const reader = new FileReader();
	reader.onload = (e) => {
		const img = new Image();
		img.onload = () => {
			const maxWidth = parseInt(maxDimInput.value);
			const targetSize = calculateResizedDimensions(img, maxWidth);
			
			canvas.width = targetSize.width;
			canvas.height = targetSize.height;
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, targetSize.width, targetSize.height);
			
			saveImage(canvas, file.name, qualitySlider.value);
			
			if (processingQueue.length > 0) {
				processNextImage(processingQueue.shift());
			}
		};
		img.src = e.target.result;
	};
	reader.readAsDataURL(file);
}

function calculateResizedDimensions(img, maxDim) {
	const ratio = Math.min(maxDim / img.width, maxDim / img.height);
	return {
		width: Math.round(img.width * ratio),
		height: Math.round(img.height * ratio)
	};
}

Hàm lưu trữ ảnh đã xử lý

function saveImage(canvas, filename, quality) {
	const imageData = canvas.toDataURL('image/jpeg', parseFloat(quality));
	const link = document.createElement('a');
	link.href = imageData;
	link.download = `${filename.split('.')[0]}.jpg`;
	document.body.appendChild(link);
	link.click();
	document.body.removeChild(link);
}