HTML5 / Javascript - DataURL 到 Blob & Blob 到 DataURL

Question

我有一個來自 canvas 的 DataURL，它顯示了我的網絡攝像頭。 我使用 Matt 在這里的回答將這個 dataURL 變成一個 blob： 如何將 dataURL 轉換為 javascript 中的文件 object？

如何將此 blob 轉換回相同的 DataURL？ 我花了一天時間研究這個，我很驚訝這沒有更好的記錄，除非我是盲人。

編輯：有

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob); 

但它只返回一個非常短的 URL 似乎指向本地文件，但我需要通過 a.network 發送網絡攝像頭數據。

Answer 1

使用我的代碼在 javascript 中的 dataURL 和 blob 對象之間進行轉換。 （比鏈接中的代碼更好。）

//**dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
});

Answer 2

沒關系，在堅持使用 javascript 和 websockets 顯示來自 blob 的圖像並讓我的服務器轉發原始（但）未修改的 BinaryWebSocketFrames 線程中的說明后，它最終工作了。

現在我仍在與畫布（<1fp）的不良性能作斗爭，但這可能成為新線程的主題。

Answer 3

我喜歡單行代碼，所以這是一個基於Promise的代碼，用於將 blob 轉換為數據 URL：

let blob = ...;
let dataUrl = await new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);

或者，作為 function：

function blobToDataUrl(blob) {
  return new Promise(r => {let a=new FileReader(); a.onload=r; a.readAsDataURL(blob)}).then(e => e.target.result);
}

let dataUrl = await blobToDataUrl(blob);

Answer 4

DataURL to Blob 有更好的解決方案：

const dataURL = "dataURL string...";
const res = await fetch(dataURL);
const blob = await res.blob();

Answer 5

這是一個基於Promise的 Typescript 版本，帶有正確的錯誤檢查。

function blobToDataURL(blob: Blob): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = _e => resolve(reader.result as string);
    reader.onerror = _e => reject(reader.error);
    reader.onabort = _e => reject(new Error("Read aborted"));
    reader.readAsDataURL(blob);
  });
}