如何在 JavaScript 中將圖片轉換為 Base64 字串？

在JavaScript 中將映像轉換為Base64 字串

將映像轉換為Base64 字串是Web 開發中的常見任務，尤其是當您需要將圖像發送到伺服器時。以下是實現此目的的兩種流行的JavaScript 方法：

1. FileReader 方法：

此方法利用FileReader API 將映像作為blob 讀取，然後將其轉換為資料URL：

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

2. HTML Canvas方法：

另一個選擇是建立 HTML 畫布，在其上繪製圖像，然後將畫布轉換為資料 URL：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Resize the canvas to the image's size
canvas.width = image.width;
canvas.height = image.height;

// Draw the image onto the canvas
ctx.drawImage(image, 0, 0);

// Convert the canvas to a data URL
const dataUrl = canvas.toDataURL('image/jpeg');

以上是如何在 JavaScript 中將圖片轉換為 Base64 字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！