Ajax上傳圖片大小壓縮

在現代web應用程序中，上傳圖片是非常常見的操作之一。然而，大圖片文件會占用大量的服務器存儲空間和帶寬，并且會導致加載時間過長。為了解決這個問題，我們可以使用Ajax上傳圖片的同時進行大小壓縮操作。

假設我們有一個上傳頭像的功能，允許用戶選擇并上傳自己的頭像圖片。通常，用戶可能會選擇一張非常高分辨率的圖片，比如說3000像素乘以3000像素。這樣的圖片文件大小很大，可能幾兆甚至更多。如果我們直接將這個文件上傳到服務器，會對服務器和帶寬造成很大的負擔。此外，在用戶上傳大文件的過程中，頁面可能會出現卡頓的情況，給用戶帶來不好的體驗。

因此，我們可以在Ajax上傳圖片的過程中，使用JavaScript進行圖片的大小壓縮。通過對圖片進行壓縮，我們可以將原來幾兆甚至更多的圖片文件大小，大幅減小至幾十或者幾百KB。這樣一來，不僅節省了服務器存儲空間和帶寬，也提升了用戶上傳體驗。

下面是一個示例代碼，展示如何使用Ajax上傳圖片，并在此過程中進行大小壓縮：

// HTML代碼
<input type="file" id="upload-input" onchange="handleImageUpload()">
// JavaScript代碼
function handleImageUpload() {
var fileInput = document.getElementById('upload-input');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 200; // 壓縮后圖片的寬度
canvas.height = img.height * (canvas.width / img.width);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var compressedImage = canvas.toDataURL('image/jpeg', 0.8); // 壓縮后的圖片
// 將壓縮后的圖片上傳到服務器
// ...
}
img.src = event.target.result;
}
reader.readAsDataURL(file);
}

以上代碼中，我們通過監聽文件上傳框的onchange事件，獲取用戶選擇的圖片文件。然后，使用FileReader對象將文件讀取為Data URL，即圖片的Base64編碼字符串。接著，創建一個新的Image對象，并設置其src屬性為Data URL。在Image對象加載完成后，我們創建一個canvas元素，并設置其寬度為200像素，高度根據圖片的長寬比自適應。然后，在canvas上繪制已加載的Image對象，調整圖像大小。最后，我們使用canvas的toDataURL方法將canvas上的圖像轉換為JPEG格式并進行壓縮，得到壓縮后的圖片。你可以通過調整canvas的寬度、toDataURL方法的第二個參數（壓縮質量）來控制壓縮后的圖片大小。

最后，我們將壓縮后的圖片通過Ajax方法上傳到服務器并進行保存，完成上傳過程。

通過以上方式，在用戶上傳圖片的同時進行大小壓縮操作，可以顯著減小圖片文件大小，從而節省服務器存儲空間和帶寬，并提升用戶上傳體驗。