JavaScript 是一種廣泛應用于 Web 開發的腳本語言，其中一個非常常見的應用之一就是判斷圖片。在網站開發中，經常需要根據不同的圖片類型和狀態采取不同的處理方式。那么怎樣用 JavaScript 來實現呢？接下來，我將分享幾種常用的判斷圖片的方法。

方法一：根據文件名后綴判斷

function checkImgSuffix(imgUrl) {
let suffix = imgUrl.substring(imgUrl.lastIndexOf(".") + 1).toLowerCase();
if (suffix == "jpg" || suffix == "jpeg" || suffix == "png" || suffix == "gif") {
// 圖片格式正確
} else {
// 圖片格式錯誤
}
}

這種方法是比較常見的判斷圖片方式，通過截取文件名后綴并轉換為小寫判斷圖片格式是否正確。當然，這種方法不僅可以判斷圖片格式是否正確，還可以根據具體需要擴展判斷的文件類型。

方法二：使用 img 標簽的 onload 和 onerror 事件判斷

function checkImgLoadState(imgUrl) {
let img = new Image();
img.onload = function() {
// 圖片加載成功
};
img.onerror = function() {
// 圖片加載失敗
};
img.src = imgUrl;
}

這種方法是通過 Image 對象的 onload 和 onerror 事件來判斷圖片是否能夠正常加載。當圖片加載成功時，會觸發 onload 事件，而加載失敗時，會觸發 onerror 事件。這種方法不僅判斷了圖片是否能夠正常加載，還可以更細致地判斷圖片本身的問題。

方法三：使用 Canvas 的 toDataURL 方法判斷

function checkImgTypeByCanvas(imgUrl) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = imgUrl;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
let base64Img = canvas.toDataURL("image/jpeg");
if (base64Img.indexOf("data:image/jpeg") != -1) {
// 圖片類型為 JPEG
} else if (base64Img.indexOf("data:image/png") != -1) {
// 圖片類型為 PNG
} else {
// 圖片類型為其他格式
}
};
}

這種方法是利用 Canvas 的 toDataURL 方法將圖片轉換為 base64 編碼的字符串，并通過判斷該字符串的開頭內容來確定圖片類型。雖然這種方法比較復雜，但是它可以判斷圖片的類型更加準確。

以上幾種方法都是常用的 JavaScript 判斷圖片的方式，通過不同的判斷方式可以很好地適應不同的需求。在實際開發中，可以根據具體情況選擇適合自己的判斷方式。