let originalImageBlob = null; // Lưu trữ Data URL của ảnh gốc

/** * Hàm hiển thị thông báo lỗi/thành công * @param {string} msg - Nội dung thông báo * @param {string} type - Loại thông báo ('error' hoặc 'success') */ function showMessage(msg, type = 'error') { messageDisplay.textContent = msg; if (type === 'error') { messageDisplay.className = 'message text-red-500'; } else { messageDisplay.className = 'message text-green-500'; } }

/** * Hàm tải ảnh từ Data URL * @param {string} dataUrl - Data URL của hình ảnh * @returns {Promise} - Trả về một Promise giải quyết với đối tượng Image */ function loadImage(dataUrl) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error('Không thể tải hình ảnh. Vui lòng kiểm tra định dạng hoặc nguồn.')); img.src = dataUrl; }); }

// Xử lý sự kiện khi người dùng chọn hình ảnh imageInput.addEventListener('change', async function(event) { const file = event.target.files[0]; if (file) { // Kiểm tra kiểu file if (!file.type.startsWith('image/')) { showMessage('Vui lòng chỉ chọn các tệp hình ảnh (JPG, PNG, GIF, v.v.).'); imagePreview.innerHTML = '

Chưa có hình ảnh nào được chọn

'; upscaleButton.disabled = true; originalImageBlob = null; upscaledImageDisplay.style.display = 'none'; downloadLink.style.display = 'none'; return; }

showMessage(''); // Xóa thông báo lỗi cũ const reader = new FileReader(); reader.onload = async function(e) { originalImageBlob = e.target.result; // Lưu trữ Data URL imagePreview.innerHTML = ``; upscaleButton.disabled = false; // Kích hoạt nút upscale upscaledImageDisplay.style.display = 'none'; // Ẩn ảnh upscale cũ downloadLink.style.display = 'none'; // Ẩn nút tải xuống cũ }; reader.onerror = () => showMessage('Không thể đọc tệp hình ảnh.'); reader.readAsDataURL(file); } else { // Nếu không có file nào được chọn imagePreview.innerHTML = '

Chưa có hình ảnh nào được chọn

'; upscaleButton.disabled = true; originalImageBlob = null; showMessage(''); upscaledImageDisplay.style.display = 'none'; downloadLink.style.display = 'none'; } });

// Xử lý sự kiện khi người dùng nhấp vào nút nâng cấp upscaleButton.addEventListener('click', async function() { if (!originalImageBlob) { showMessage('Vui lòng chọn một hình ảnh trước khi nâng cấp.'); return; }

const upscaleFactor = parseFloat(upscaleFactorInput.value); if (isNaN(upscaleFactor) || upscaleFactor < 1 || upscaleFactor > 10) { // Giới hạn hệ số để tránh lỗi bộ nhớ showMessage('Hệ số upscale không hợp lệ. Vui lòng nhập một số từ 1 đến 10.'); return; }

// Hiển thị trạng thái tải buttonText.classList.add('hidden'); loadingSpinner.classList.remove('hidden'); upscaleButton.disabled = true; showMessage('Đang nâng cấp hình ảnh...', 'success'); // Thông báo đang xử lý

try { // Tải hình ảnh gốc const img = await loadImage(originalImageBlob);

const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');

const originalWidth = img.width; const originalHeight = img.height;

// Tính toán kích thước mới const newWidth = Math.round(originalWidth * upscaleFactor); const newHeight = Math.round(originalHeight * upscaleFactor);

// Giới hạn kích thước canvas tối đa để tránh lỗi bộ nhớ với ảnh quá lớn const MAX_CANVAS_SIZE = 8000; // Ví dụ: 8000px if (newWidth > MAX_CANVAS_SIZE || newHeight > MAX_CANVAS_SIZE) { showMessage(`Kích thước hình ảnh sau khi nâng cấp quá lớn (${newWidth}x${newHeight}px). Vui lòng giảm hệ số upscale hoặc chọn ảnh nhỏ hơn.`); return; }

canvas.width = newWidth; canvas.height = newHeight;

// Tối ưu hóa chất lượng làm mịn hình ảnh trên Canvas // Đây là các thuộc tính tiêu chuẩn của Canvas 2D API để kiểm soát chất lượng nội suy ctx.imageSmoothingEnabled = true; // 'high' có thể không được hỗ trợ trên tất cả các trình duyệt hoặc có thể có hiệu suất thấp // Nếu 'high' không hoạt động, trình duyệt sẽ tự động quay về mặc định hoặc tốt nhất có thể if (ctx.imageSmoothingQuality) { // Kiểm tra xem thuộc tính có tồn tại không ctx.imageSmoothingQuality = 'high'; }

// Vẽ hình ảnh gốc lên canvas với kích thước mới // Phương pháp này thực hiện nội suy, không thêm chi tiết mới ctx.drawImage(img, 0, 0, newWidth, newHeight);

// Lấy dữ liệu hình ảnh đã upscale dưới dạng Data URL PNG const upscaledDataURL = canvas.toDataURL('image/png'); // Sử dụng PNG để giữ chất lượng tốt hơn

upscaledImage.src = upscaledDataURL; upscaledImageDisplay.style.display = 'flex'; // Hiển thị khối kết quả downloadLink.href = upscaledDataURL; downloadLink.style.display = 'inline-flex'; // Hiển thị nút tải xuống showMessage('Hình ảnh đã được nâng cấp thành công!', 'success');

} catch (error) { console.error('Lỗi khi nâng cấp hình ảnh:', error); showMessage(`Đã xảy ra lỗi trong quá trình nâng cấp: ${error.message}`); } finally { // Đảm bảo trạng thái nút và spinner được reset buttonText.classList.remove('hidden'); loadingSpinner.classList.add('hidden'); upscaleButton.disabled = false; } });