我正在尝试对图像进行编码和解码。我正在使用FileReader的readAsDataURL方法将图像转换为base64。然后将其转换回去,我尝试使用readAsBinaryString()
和atob()
但没有运气。是否有另一种方法可以在没有base64编码的情况下保留图像?
readAsBinaryString()
开始读取指定Blob的内容,可能是a 文件。当读取操作完成时,readyState将变为 完成,并且将调用onloadend回调(如果有)。在那 time,result属性包含文件中的原始二进制数据。
知道我在这里做错了吗?
示例代码 http://jsfiddle.net/qL86Z/3/
$("#base64Button").on("click", function () {
var file = $("#base64File")[0].files[0]
var reader = new FileReader();
// callback for readAsDataURL
reader.onload = function (encodedFile) {
console.log("reader.onload");
var base64Image = encodedFile.srcElement.result.split("data:image/jpeg;base64,")[1];
var blob = new Blob([base64Image],{type:"image/jpeg"});
var reader2 = new FileReader();
// callback for readAsBinaryString
reader2.onloadend = function(decoded) {
console.log("reader2.onloadend");
console.log(decoded); // this should contain binary format of the image
// console.log(URL.createObjectURL(decoded.binary)); // Doesn't work
};
reader2.readAsBinaryString(blob);
// console.log(URL.createObjectURL(atob(base64Image))); // Doesn't work
};
reader.readAsDataURL(file);
console.log(URL.createObjectURL(file)); // Works
});
谢谢!
答案 0 :(得分:13)
经过一些研究后,我找到了here的答案 我基本上需要将原始二进制文件包装在arraybuffer中并将二进制字符转换为Unicode。
这是缺少的代码,
var binaryImg = atob(base64Image);
var length = binaryImg.length;
var ab = new ArrayBuffer(length);
var ua = new Uint8Array(ab);
for (var i = 0; i < length; i++) {
ua[i] = binaryImg.charCodeAt(i);
}
完整示例代码为here
答案 1 :(得分:1)
URL.createObjectURL
期望Blob
(可以是File
)作为其参数。不是字符串。这就是URL.createObjectURL(file)
有效的原因。
相反,您正在创建一个FileReader
reader
,将file
读作数据网址,然后您使用该数据网址创建另一个{{1} (具有相同的内容)。然后你甚至创建一个Blob
来从刚构建的reader2
中获取二进制字符串。但是,blob
url字符串部分(即使base64Image
- 解码为更大的字符串)和btoa
字符串都不是decoded.binary
的参数!