HTML5 / Javascript – DataURL到Blob和Blob到DataURL

前端之家收集整理的这篇文章主要介绍了HTML5 / Javascript – DataURL到Blob和Blob到DataURL前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个DataURL从画布显示我的网络摄像头.我把这个dataURL变成一个blob,使用Matt的答案: 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);
});

猜你在找的HTML5相关文章