如何將base64轉換為RGBA8888

Question

我正在嘗試將圖像轉換為 base 64，然后再轉換為 RGBA8888 以提供相機緩沖區，但在嘗試從 base64 轉換為 rgba 時我被卡住了。

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />

Answer 1

畫布 - 我使用畫布是因為它可以獲取底層數據，並且可以將任何類型的圖像格式呈現到自身上。

Html 圖像標簽 - 不確定這是否必要，但它提供了一種將圖像文件繪制到畫布上的簡單方法。

我從您的閱讀器代碼中獲取文件，將其插入到 img 中，將該 img 渲染到畫布上，然后從畫布中提取原始 RGBA 幀。 您可以在此處了解數據格式（數據屬性）。 我希望這是適合您的應用程序的格式。

 const canvas = document.createElement("canvas"); const ctx = canvas.getContext('2d'); function encodeImageFileAsURL(element) { var file = element.files[0]; var reader = new FileReader(); reader.onloadend = function() { const img = document.createElement("img"); img.onload = () => { const w = img.naturalWidth, h = img.naturalHeight; ctx.drawImage(img, 0, 0); const imgData = ctx.getImageData(0, 0, w, h); const arr = Uint8ClampedArray.from(imgData.data); // do something with arr console.log(`image width: ${w}, image height: ${h}, expected raw data size (wxhx 4): ${w * h * 4}, actual size: ${arr.length}`); }; img.src = reader.result; }; reader.readAsDataURL(file); }

 <input type="file" onchange="encodeImageFileAsURL(this)" />