許多網站都允許用戶上傳圖片，但是如果用戶忘記手動保存圖片，很可能會導致數據的丟失。這時候，我們可以通過JavaScript編寫自動保存圖片的功能，從而為用戶提供更好的體驗。

首先，我們需要了解如何從網頁上獲取圖片的URL。比如說，我們可以通過以下代碼獲取指定元素的背景圖片：

var backgroundImage = document.getElementById("element-id").style.backgroundImage;

如果需要獲取元素的圖片URL，可以使用以下代碼：

var image = document.getElementById("element-id");
var imageUrl = image.src || image.getAttribute("src");

接下來，可以使用XMLHttpRequest將圖片數據發送到服務器上保存。以下代碼展示了一個簡單的上傳圖片的函數：

function uploadImage(imageUrl) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload-image");
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(imageUrl);
}

此外，我們還可以使用HTML5中的Blob類型來將圖片轉換為二進制數據，并使用FormData來將數據上傳到服務器。以下是一個使用JavaScript自動保存圖片的完整示例：

var image = document.getElementById("element-id");
var imageUrl = image.src || image.getAttribute("src");
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload-image");
var blob = null;
var xhrSuccess = false;
xhr.onload = function() {
xhrSuccess = true;
};
xhr.onerror = function() {
xhrSuccess = false;
};
var xhrTimeout = setTimeout(function() {
xhr.abort();
console.log("Xhr timeout");
}, 5000);
var xhrLoadEnd = function() {
clearTimeout(xhrTimeout);
if (xhrSuccess) {
console.log("Image uploaded successfully");
} else {
console.log("Image upload failed");
}
};
if (typeof window.Blob === "function") {
blob = new Blob([imageUrl], {type: "application/octet-stream"});
xhr.send(blob);
} else {
var formData = new FormData();
formData.append("image", imageUrl);
xhr.send(formData);
}
xhr.addEventListener("loadend", xhrLoadEnd);

當用戶上傳圖片時，我們可以在頁面底部添加一個提示，讓用戶知道圖片是否已經成功保存：

function displayUploadMessage(success) {
var message = document.createElement("div");
var messageText = document.createTextNode(
success ? "Image uploaded successfully" : "Image upload failed"
);
message.appendChild(messageText);
document.body.appendChild(message);
}

最后，我們可以通過以下代碼將消息顯示在頁面底部：

xhr.addEventListener("loadend", function() {
clearTimeout(xhrTimeout);
if (xhrSuccess) {
displayUploadMessage(true);
} else {
displayUploadMessage(false);
}
});

在這篇文章中，我們介紹了如何使用JavaScript編寫自動保存圖片的功能。通過簡單的代碼實現，可以為用戶提供更好的體驗，避免數據的丟失。