Javascript 如何用新的Blob构造函数替换不推荐使用的BLOBuilder?
由于Blobbuilder已被弃用,而且我最近决定使用一种新的面部识别API,所以我很难切换到“blob”Javascript 如何用新的Blob构造函数替换不推荐使用的BLOBuilder?,javascript,blobs,Javascript,Blobs,由于Blobbuilder已被弃用,而且我最近决定使用一种新的面部识别API,所以我很难切换到“blob” 但是我一直得到未捕获的TypeError:Object#在控制台中没有方法“getBlob”。不知道我错过了什么。如果我尝试使用bb.append(ab)I getUncaught TypeError:Object在控制台中没有“append”方法。从BlobBuilder切换到Blob非常简单。尝试以下向后兼容的代码(catch块中的内容是您的原始代码): 在使用Blob之前,请先包含这
但是我一直得到
未捕获的TypeError:Object#在控制台中没有方法“getBlob”
。不知道我错过了什么。如果我尝试使用bb.append(ab)
I getUncaught TypeError:Object在控制台中没有“append”方法。从BlobBuilder
切换到Blob
非常简单。尝试以下向后兼容的代码(catch
块中的内容是您的原始代码):
在使用Blob之前,请先包含这些内容,这样您就可以在只支持已弃用BlobBuilder的浏览器中使用Blob构造函数。在我的帖子更新中,我尝试了你的代码,收到了“Uncaught TypeError:undefined is not a function”@shayward在我的回答中使用代码,不做任何修改:使用你的原始函数,并用我的代码替换最后几行(
var BlobBuilder……}
)。谢谢,键入:mimeString后出现了一个错误。缺少结束括号。但是对于未来,这也会被删除吗?@shayward中定义了Blob
构造函数。因此,除非规范再次更改,否则您将是安全的。关于兼容性,请参阅。在本文中添加一些注释可能会有所帮助,以明确每个部分正在做什么。是的,这将使它在将来对其他部分更有帮助。
function dataURItoBlob(dataURI, callback) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = unescape(dataURI.split(',')[1]);
}
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
// write the ArrayBuffer to a blob, and you're done
var Blob = window.URL || window.webkitURL;
var bb = new Blob();
/*var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);*/
/*var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);*/
return bb.getBlob(mimeString);
}
...
try {
return new Blob([ab], {type: mimeString});
} catch (e) {
// The BlobBuilder API has been deprecated in favour of Blob, but older
// browsers don't know about the Blob constructor
// IE10 also supports BlobBuilder, but since the `Blob` constructor
// also works, there's no need to add `MSBlobBuilder`.
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
}
Blob = (function() {
var nativeBlob = Blob;
// Add unprefixed slice() method.
if (Blob.prototype.webkitSlice) {
Blob.prototype.slice = Blob.prototype.webkitSlice;
}
else if (Blob.prototype.mozSlice) {
Blob.prototype.slice = Blob.prototype.mozSlice;
}
// Temporarily replace Blob() constructor with one that checks support.
return function(parts, properties) {
try {
// Restore native Blob() constructor, so this check is only evaluated once.
Blob = nativeBlob;
return new Blob(parts || [], properties || {});
}
catch (e) {
// If construction fails provide one that uses BlobBuilder.
Blob = function (parts, properties) {
var bb = new (WebKitBlobBuilder || MozBlobBuilder), i;
for (i in parts) {
bb.append(parts[i]);
}
return bb.getBlob(properties && properties.type ? properties.type : undefined);
};
}
};
}());