使用JavaScript是為網站添加功能非常常見的方法之一。其中之一就是圖像（image）的處理。在本文中，我們將對JavaScript中的圖像進行深入的探討，涵蓋了圖像的加載、調整大小和保存等主題。 圖像加載 在JavaScript中，加載圖像需要使用Image對象。以下是一個例子：

const img = new Image();
img.src = "example.jpg";
img.onload = function() {
console.log("Image loaded successfully");
}

在此示例中，我們創建了一個新的Image對象并設置了其src屬性為圖片的路徑。當圖片完全加載完成時，調用onload回調函數。 圖像調整大小 如果您想調整圖像的大小，JavaScript可以很容易地實現。以下是一個簡單的例子，展示如何將圖像從當前大小縮小為50%：

const img = new Image();
img.src = "example.jpg";
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
img.onload = function() {
canvas.width = img.width / 2;
canvas.height = img.height / 2;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);
}

在本例中，我們首先創建了一個新的Image對象并設置了其src屬性為圖片的路徑。然后，我們創建了一個canvas元素和繪畫上下文對象。在圖像加載完成后，我們將canvas的寬度和高度設置為原始圖像大小的一半，然后使用drawImage()方法繪制圖像到canvas。 圖像保存 最后，讓我們看一下如何使用JavaScript將圖像保存到本地計算機。以下是一個例子：

const img = new Image();
img.src = "example.jpg";
img.onload = function() {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const a = document.createElement("a");
a.download = "example.png";
a.href = canvas.toDataURL("image/png");
a.click();
}

在本例中，我們首先創建了一個新的Image對象并設置了其src屬性為圖片的路徑。然后，我們創建了一個canvas元素和繪畫上下文對象，并將其寬度和高度設置為與原始圖像相同。隨后，我們使用drawImage()方法將圖像繪制到canvas上。最后，我們創建了一個元素并將其download屬性設置為要保存的文件名，href屬性設置為canvas的鏈接，以便用戶單擊下載鏈接時會有一個保存文件的對話框彈出。 總結 JavaScript是用于圖像處理的一種強大方法。在本文中，我們討論了加載圖像、調整大小和保存的幾種方法。希望這些知識能夠對您在開發網站中使用JavaScript有所幫助。