这是我想Blob
对Base64
字符串进行编码的代码片段:
该带注释的部分有效,并且当它生成的URL设置为img src时,它将显示图像:
var blob = items[i].getAsFile();
//var URLObj = window.URL || window.webkitURL;
//var source = URLObj.createObjectURL(blob);
//console.log("image source=" + source);
var reader = new FileReader();
reader.onload = function(event){
console.log(event.target.result)
}; // data url!
var source = reader.readAsBinaryString(blob);
问题在于下面的代码,生成的源变量为null
更新:
有没有更简单的方法可以使用JQuery做到这一点,从而能够从Blob文件中创建Base64字符串,如上面的代码所示?
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
console.log(base64data);
}
将文档 readAsDataURL
编码为base64
这为我工作:
var blobToBase64 = function(blob, callback) {
var reader = new FileReader();
reader.onload = function() {
var dataUrl = reader.result;
var base64 = dataUrl.split(',')[1];
callback(base64);
};
reader.readAsDataURL(blob);
};
有一种不依赖任何堆栈的纯JavaSript方法:
const blobToBase64 = blob => {
const reader = new FileReader();
reader.readAsDataURL(blob);
return new Promise(resolve => {
reader.onloadend = () => {
resolve(reader.result);
};
});
};
要使用此辅助函数,您应该设置一个回调,例如:
blobToBase64(blobData).then(res => {
// do what you wanna do
console.log(res); // res is base64 now
});
我针对React Native项目上的问题编写了此辅助函数,我想下载一个图像,然后将其存储为缓存的图像:
fetch(imageAddressAsStringValue)
.then(res => res.blob())
.then(blobToBase64)
.then(finalResult => {
storeOnMyLocalDatabase(finalResult);
});
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
base64data = reader.result;
console.log(base64data);
}
function bufferToBinaryString(arrayBuffer){
return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
(async () => console.log(btoa(bufferToBinaryString(await new Response(blob).arrayBuffer()))))();
要么
function bufferToBinaryString(arrayBuffer){
return String.fromCharCode(...new Uint8Array(arrayBuffer));
}
new Response(blob).arrayBuffer().then(arr_buf => console.log(btoa(bufferToBinaryString(arr_buf)))))
请参见Response的构造函数,您可以将其[blob, buffer source form data, readable stream, etc.]
转换为Response,然后可以[json, text, array buffer, blob]
使用异步方法/回调将其转换为Response。
编辑:正如@Ralph提到的,将所有内容都转换为utf-8字符串会引起问题(不幸的是,Response API没有提供将其转换为二进制字符串的方式),因此将数组缓冲区用作中间变量,这需要两个步骤(将其转换为字节数组,然后将其转换为二进制字符串)(如果您坚持使用本机btoa
方法)。
因此,问题在于您要上传基本64位图像,并且具有Blob网址。现在,适用于所有html 5浏览器的答案是:
var fileInput = document.getElementById('myFileInputTag');
var preview = document.getElementById('myImgTag');
fileInput.addEventListener('change', function (e) {
var url = URL.createObjectURL(e.target.files[0]);
preview.setAttribute('src', url);
});
function Upload()
{
// preview can be image object or image element
var myCanvas = document.getElementById('MyCanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(preview, 0,0);
var base64Str = myCanvas.toDataURL();
$.ajax({
url: '/PathToServer',
method: 'POST',
data: {
imageString: base64Str
},
success: function(data) { if(data && data.Success) {}},
error: function(a,b,c){alert(c);}
});
}
您可以通过以下方法解决问题:
var canvas = $('#canvas');
var b64Text = canvas.toDataURL();
b64Text = b64Text.replace('data:image/png;base64,','');
var base64Data = b64Text;
希望对您有帮助
我想要一些可以访问base64值的东西来存储到列表中,并且对我来说添加事件监听器是可行的。您只需要FileReader,它将读取图像Blob并在结果中返回base64。
createImageFromBlob(image: Blob) {
const reader = new FileReader();
const supportedImages = []; // you can also refer to some global variable
reader.addEventListener(
'load',
() => {
// reader.result will have the required base64 image
const base64data = reader.result;
supportedImages.push(base64data); // this can be a reference to global variable and store the value into that global list so as to use it in the other part
},
false
);
// The readAsDataURL method is used to read the contents of the specified Blob or File.
if (image) {
reader.readAsDataURL(image);
}
}
最后一部分是readAsDataURL,这是非常重要的,用于读取指定Blob的内容
一行代码中最简单的方法
var base64Image = new Buffer(blob,'binary').toString('base64');
文章标签:javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!