如何使用JavaScript保存圖像至相冊

在Web應用程序開發中，保存圖片至相冊是一個非常常見的需求。本文將介紹如何使用JavaScript來實現這個功能。

一、選取圖片

首先，用戶需要選取自己要保存的圖片。這可以通過input標籤來實現，其中type屬性設置為file，accept屬性限制上傳的文件為圖片類型。

<input type="file" accept="image/*" onchange="selectImage(event)">

接下來，需要編寫selectImage函數，獲取用戶選取的圖片，可以通過FileReader對象將圖片轉化為base64字元串：

function selectImage(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    var imageBase64 = e.target.result;
  }
  reader.readAsDataURL(file);
}

二、將圖片保存至相冊

在獲取到圖片的base64字元串後，需要將其保存至相冊。這可以通過canvas畫布來實現，先將base64字元串繪製至畫布，再將畫布轉化為dataURL，最後利用a標籤的download屬性來保存圖片。

function saveImage(imageBase64) {
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  var image = new Image();
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
    context.drawImage(image, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    var link = document.createElement("a");
    link.download = "image.png";
    link.href = dataURL;
    link.click();
  }
  image.src = imageBase64;
}

在調用saveImage函數前，需要先判斷用戶是否已經選取了圖片，以及圖片的類型是否為png或jpg：

function selectImage(event) {
  var file = event.target.files[0];
  if (file.type !== "image/png" && file.type !== "image/jpeg") {
    alert("只能上傳png或jpg格式的圖片！");
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var imageBase64 = e.target.result;
    saveImage(imageBase64);
  }
  reader.readAsDataURL(file);
}

三、優化用戶體驗

為了讓用戶體驗更加友好，可以在用戶選取圖片後，使用canvas畫布將圖片實時展示出來：

function selectImage(event) {
  var file = event.target.files[0];
  if (file.type !== "image/png" && file.type !== "image/jpeg") {
    alert("只能上傳png或jpg格式的圖片！");
    return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var imageBase64 = e.target.result;
    var canvas = document.getElementById("previewCanvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    image.onload = function() {
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);
    }
    image.src = imageBase64;
    saveImage(imageBase64);
  }
  reader.readAsDataURL(file);
}

同時，在畫布下方增加一個保存按鈕，讓用戶可以主動點擊保存圖片：

<canvas id="previewCanvas"></canvas>
<button onclick="saveButton()">保存</button>

在saveButton函數中調用saveImage即可：

function saveButton() {
  var canvas = document.getElementById("previewCanvas");
  var dataURL = canvas.toDataURL("image/png");
  var link = document.createElement("a");
  link.download = "image.png";
  link.href = dataURL;
  link.click();
}

四、總結

本文介紹了使用JavaScript保存圖片至相冊的方法，包括選取圖片、將圖片保存至相冊、優化用戶體驗等方面。通過本文的介紹，我們可以更好地掌握如何使用JavaScript實現常見的Web開發需求。