如何使用JavaScript將圖片轉為Base64編碼

一、選擇圖片

要將圖片轉為Base64編碼，首先需要從本地文件系統中選擇一張圖片。可以使用HTML5提供的標籤來實現文件選擇功能。以下是示例代碼：

<input type="file" id="fileInput">

要獲取用戶選擇的圖片文件對象，在JavaScript中，可以通過以下代碼實現：

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];

其中，fileInput.files[0]表示選擇的第一個文件。如果用戶允許選擇多個文件，則可以使用fileInput.files來遍歷所有文件。

二、讀取圖片

獲取到文件對象後，需要將其轉換為可以處理的數據格式，本例中我們需要將其轉為二進制數據。可以使用FileReader對象來讀取文件，以下是示例代碼：

const reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e) {
  const binary = e.target.result;
  // 在此處處理二進制數據
};

在讀取完成後，二進制數據會保存在reader.result屬性中。

三、將圖片轉換為Base64編碼

得到二進制數據之後，就可以將其轉換為Base64編碼了。可以使用window.btoa方法實現，以下是示例代碼：

const base64 = window.btoa(binary);

在此處，將讀取到的二進制數據傳遞給window.btoa方法，即可得到圖片的Base64編碼。

四、將Base64編碼渲染到頁面上

最後一步是將Base64編碼渲染到頁面上，可以將其添加到標籤的src屬性中。以下是示例代碼：

const image = document.createElement('img');
image.src = "data:image/png;base64," + base64;
document.body.appendChild(image);

需要注意的是，需要在Base64編碼前加上”data:image/png;base64,”前綴，以指定圖片類型。在此處，我們將其指定為PNG格式。

五、完整代碼

以下是將圖片轉為Base64編碼的完整代碼：

<input type="file" id="fileInput">

const fileInput = document.getElementById('fileInput');
const reader = new FileReader();
const image = document.createElement('img');

fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  reader.readAsBinaryString(file);
});

reader.onload = function(e) {
  const binary = e.target.result;
  const base64 = window.btoa(binary);
  image.src = "data:image/png;base64," + base64;
  document.body.appendChild(image);
};

以上代碼實現了從文件選擇到渲染Base64編碼的完整流程。