我有一个来自画布的 DataURL 显示我的网络摄像头。我使用 Matt 的回答将这个 dataURL 变成了一个 blob：How to convert dataURL to file object in javascript?
如何将此 blob 转换回相同的 DataURL？我花了一天的时间研究这个，我很惊讶这没有更好的记录，除非我是盲人。
编辑：有
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
但它只返回一个似乎指向本地文件的非常短的 URL，但我需要通过网络发送网络摄像头数据。
使用我的代码在 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);
});
没关系，在坚持使用 javascript 和 websockets 显示来自 blob 的图像并让我的服务器转发原始（但）未修改的 BinaryWebSocketFrames线程中的说明后，它最终工作了。
现在我仍在与画布（<1fp）的不良性能作斗争，但这可能成为新线程的主题。
这是一个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);
});
}