AJAX（Asynchronous JavaScript and XML）是一種通信技術，可以在不重新加載整個頁面的情況下從服務器異步加載數據。而Base64是一種用于將二進制數據轉換成可打印ASCII字符的編碼方式。在Web開發中，經常使用AJAX和Base64來實現圖片的無刷新上傳和顯示。本文將討論如何使用AJAX和Base64實現圖片的即時上傳和顯示。

首先，讓我們看一個簡單的示例。假設我們有一個上傳按鈕和一個用于顯示圖片的img標簽。當用戶選擇圖片后，我們通過AJAX將圖片上傳到服務器，并將上傳成功后的圖片以Base64編碼的方式返回。最后，我們將Base64編碼的圖片設置為img標簽的src屬性，從而在頁面上顯示圖片。

// HTML部分
<input type="file" id="uploadBtn" accept="image/*" />
<img id="image" />
// JavaScript部分
document.getElementById("uploadBtn").addEventListener("change", function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var base64Image = e.target.result;
document.getElementById("image").src = base64Image;
// 發送AJAX請求將圖片上傳到服務器
};
reader.readAsDataURL(file);
});

上述代碼中，我們通過給文件選擇按鈕添加一個change事件監聽器，當用戶選擇了圖片后，會觸發change事件。在事件處理函數中，我們創建了一個FileReader對象，并使用它的readAsDataURL方法將文件內容讀取為Data URL。讀取成功后，我們將讀取到的Base64編碼的圖片數據設置為img標簽的src屬性，從而在頁面上顯示圖片。

需要注意的是，由于圖片的二進制數據被轉換為Base64編碼后會變得更大，因此在使用AJAX上傳圖片時，可能會增加網絡傳輸的時間和帶寬。因此，在實際開發中，我們應該對上傳的圖片進行壓縮，以減少文件大小。同時，服務器端也需要對接收到的Base64編碼的圖片進行解碼和處理。

除了圖片的上傳，我們還可以使用AJAX和Base64實現圖片的裁剪和縮放。例如，我們可以使用Canvas將圖片進行裁剪或縮放，并將處理后的圖片以Base64編碼的方式發送給服務器。

下面是一個示例代碼，展示了如何使用AJAX和Canvas將圖片進行裁剪并以Base64編碼的方式發送到服務器：

// HTML部分
<input type="file" id="uploadBtn" accept="image/*" />
<canvas id="canvas" style="display: none;"></canvas>
// JavaScript部分
document.getElementById("uploadBtn").addEventListener("change", function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var ratio = 0.5; // 縮放比例
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
var base64Image = canvas.toDataURL("image/jpeg", 0.7);
// 發送AJAX請求將縮放后的圖片上傳到服務器
};
};
reader.readAsDataURL(file);
});

在上述代碼中，我們首先創建了一個Canvas元素，并使用JavaScript獲取到其上下文。接下來，我們創建了一個新的Image對象，并將讀取到的Base64編碼的圖片數據設置為Image對象的src屬性。在Image對象的onload事件中，我們根據所需縮放的比例來設置Canvas的寬度和高度，并使用drawImage方法將圖片繪制在Canvas上。最后，我們使用toDataURL方法將Canvas上的圖片數據轉換為Base64編碼，并將其作為AJAX請求的參數發送給服務器。

通過以上示例，我們可以看到，使用AJAX和Base64可以輕松實現圖片的無刷新上傳和顯示，以及圖片的裁剪和縮放。這為我們在Web開發中處理圖片提供了便利。同時，我們也要注意在處理大型圖片時，要注意網絡傳輸的性能問題，以及合理處理Base64編碼和解碼過程中的文件大小。