在 Web 開發中，圖片上傳是一個常見的功能。然而，由于圖片文件通常較大，直接上傳會給服務器帶來巨大的壓力，同時也會導致用戶上傳時間過長。為了解決這個問題，可以采用前端技術對圖片進行壓縮，減小文件體積，從而提高上傳速度。本文將介紹如何使用 AJAX 進行圖片上傳之前的壓縮處理。

一種常見的場景是用戶需要上傳一張高分辨率的照片，例如拍攝的旅行照片。這樣的照片文件通常非常大，可能幾兆甚至幾十兆。假設我們的圖片上傳接口只接受不超過 2MB 的文件，那么用戶需要等待很長時間才能完成上傳，這顯然是不合理的。為了改善用戶體驗，我們可以在圖片上傳之前進行壓縮處理，使文件體積減小到接受范圍之內。

// 壓縮圖片并進行上傳
function compressAndUpload(file) {
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');
// 壓縮圖片尺寸
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;
if (width >height) {
if (width >MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height >MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
// 繪制壓縮后的圖片
ctx.drawImage(img, 0, 0, width, height);
// 導出壓縮后的圖片為 Blob
canvas.toBlob(function(blob) {
// 進行圖片上傳
upload(blob);
}, file.type);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
// 圖片上傳
function upload(file) {
// 使用 AJAX 進行圖片上傳
// ...
}

上述代碼中，我們使用了 HTML5 的 FileReader API 和 Canvas API 對圖片進行壓縮處理。首先，我們通過 FileReader 對象讀取用戶選擇的文件，然后將其轉換為 Data URL。接著，使用 Image 對象加載該 Data URL，以獲取圖片的原始尺寸。在壓縮處理之前，我們先定義一個最大寬度和最大高度，然后根據圖片的實際尺寸計算壓縮后的尺寸。最后，使用 Canvas 對象創建一個與壓縮后尺寸相同的畫布，并使用 drawImage 方法在畫布上繪制壓縮后的圖片。最后，使用 toBlob 方法將壓縮后的圖片導出為 Blob 對象，然后調用上傳函數進行圖片上傳。

在實際應用中，可以根據項目需求調整壓縮算法的參數，例如設置更大或更小的最大寬度和最大高度，或者使用其他壓縮算法。需要注意的是，壓縮處理可能會損失圖片的一些細節和質量，因此在選擇壓縮算法時需要權衡圖片大小和質量。

通過在前端對圖片進行壓縮處理，可以極大地減小文件體積，提高上傳速度。用戶上傳大文件時不再需要長時間等待，大大提升了用戶體驗。同時，服務器也能夠更輕松地處理上傳請求，減少了服務器壓力。因此，在需要實現圖片上傳功能時，我們應該考慮使用 AJAX 進行圖片上傳之前的壓縮處理。