Blob from DataURL?
Blob from DataURL?
使用FileReader
的readAsDataURL()
,我可以将任意数据转换为数据URL。有没有办法使用内置的浏览器api将数据URL转换回Blob
实例?
用户Matt在一年前提出了以下代码(如何将dataURL转换为javascript中的文件对象?),这可能会帮助您
编辑:正如一些评论者所报道的,BlobBuilder在一段时间前就被弃用了。这是更新后的代码:
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var byteString = atob(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);
// create a view into the buffer
var ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct values
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var blob = new Blob([ab], {type: mimeString});
return blob;
}
类似@Adria方法,但带有Fetch api和较小的[caniuse?]
不必考虑mimetype,因为blob响应类型只是开箱即用的
警告:可能违反内容安全策略(CSP)
…如果你用
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))
不要认为在不使用lib的的情况下可以做得比这更小
在现代浏览器中,可以使用Christian d'Heureuse在评论中建议的一行:
const blob = await (await fetch(dataURI)).blob();
dataURItoBlob : function(dataURI, dataTYPE) {
var binary = atob(dataURI.split(',')[1]), array = [];
for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
return new Blob([new Uint8Array(array)], {type: dataTYPE});
}
输入dataURI是数据URL,dataTYPE是文件类型,然后输出blob对象
基于XHR的方法。
function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;
req.open( 'GET', dataUrl );
req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752
req.onload = function fileLoaded(e)
{
// If you require the blob to have correct mime type
var mime = this.getResponseHeader('content-type');
callback( new Blob([this.response], {type:mime}) );
};
req.send();
}
dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
console.log( blob );
});
try:
function dataURItoBlob(dataURI) {
if(typeof dataURI !== 'string'){
throw new Error('Invalid argument: dataURI must be a string');
}
dataURI = dataURI.split(',');
var type = dataURI[0].split(':')[1].split(';')[0],
byteString = atob(dataURI[1]),
byteStringLength = byteString.length,
arrayBuffer = new ArrayBuffer(byteStringLength),
intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteStringLength; i++) {
intArray[i] = byteString.charCodeAt(i);
}
return new Blob([intArray], {
type: type
});
}
由于这些答案都不支持base64和非base64数据URL,因此这里有一个基于vuamitom删除的答案:
// from https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/
var dataURLtoBlob = exports.dataURLtoBlob = function(dataurl) {
var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1]
if(parts[0].indexOf('base64') !== -1) {
var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
while(n--){
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], {type:mime})
} else {
var raw = decodeURIComponent(parts[1])
return new Blob([raw], {type: mime})
}
}
注意:我不确定是否有其他数据URL mime类型可能需要以不同的方式处理。但如果你发现了,请告诉我!dataURL可以简单地具有他们想要的任何格式,在这种情况下,您可以为您的特定用例找到合适的代码。
使用XHR API创建blob:
function dataURLtoBlob( dataUrl, callback )
{
var req = new XMLHttpRequest;
req.open( 'GET', dataUrl );
req.responseType = 'blob';
req.onload = function fileLoaded(e)
{
callback(this.response);
};
req.send();
}
var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
dataURLtoBlob(dataURI , function( blob )
{
console.log( blob );
});
如果您需要在Google Apps Script上在服务器端工作的东西,请尝试:
function dataURItoBlob(dataURI) {
// convert base64 to Byte[]
// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
var data = Utilities.base64Decode(dataURI.split(',')[1]);
// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var blob = Utilities.newBlob(data);
blob.setContentType(mimeString);
return blob;
}
使用
FileReader.readAsArrayBuffer(Blob|File)
而不是
FileReader.readAsDataURL(Blob|File)
相关文章:
- 当图像转换为本地存储的DataURL时,EXIF被删除
- Validate JSON from Mongo?
- Get JSON from an url
- creating objects from variables ES6
- getting id from jsp
- jquery使用name from变量按类选择元素
- Using jQuery with classes from ES6
- 如何计算与php中的CRC32函数兼容的arrayBuffer(javascript中的From FileReader)
- 如何删除'被按压'state from复选框
- 当我的所有 Ng-from 都有效时启用一个按钮
- getDocument by id/get input text from button dons'不起作用
- Calling VB.Net from Javascript
- Blob from DataURL?
- PDF Generation from DOM?
- AWSELB Cookie access from Javascript
- 转换类似数组的对象Array.prototype.slice或Array.from
- 做<img>或者<画布>保存对原始(大)dataUrl对象的引用
- fetch data from db using javascript & php
- 在Stripe Checkout from表单中预先填充电子邮件
- 将dataUrl转换为blob并通过ajax提交