[英]encode/decode image with base64 breaks image
I am trying to encode and decode an image. 我正在尝试编码和解码图像。 I am using the FileReader's readAsDataURL method to convert the image to base64.
我正在使用FileReader的readAsDataURL方法将图像转换为base64。 Then to convert it back I have tried using
readAsBinaryString()
and atob()
with no luck. 然后将其转换回来我尝试使用
readAsBinaryString()
和atob()
没有运气。 Is there another way to persist images without base64 encoding them? 有没有另一种方法来保持图像没有base64编码吗?
readAsBinaryString()
readAsBinaryString()
Starts reading the contents of the specified Blob, which may be a File.
开始读取指定Blob的内容,可能是文件。 When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called.
当读取操作完成时,readyState将变为DONE,并且将调用onloadend回调(如果有)。 At that time, the result attribute contains the raw binary data from the file.
那时,result属性包含文件中的原始二进制数据。
Any idea what I'm doing wrong here? 知道我在这里做错了吗?
Sample Code http://jsfiddle.net/qL86Z/3/ 示例代码 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
});
Thanks! 谢谢!
After some more research I found the answer from here I basically needed to wrap the raw binary in an arraybuffer and convert the binary chars to Unicode. 经过一些研究,我从这里找到了答案,我基本上需要将原始二进制文件包装在arraybuffer中,并将二进制字符转换为Unicode。
This is the code that was missing, 这是缺少的代码,
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);
}
URL.createObjectURL
expects a Blob
(which can be a File
) as its argument. URL.createObjectURL
期望Blob
(可以是File
)作为其参数。 Not a string. 不是字符串。 That's why
URL.createObjectURL(file)
works. 这就是
URL.createObjectURL(file)
工作原理。
Instead, you are creating a FileReader
reader
that reads file
as a data url , then you use that data url to create another Blob
(with the same contents). 相反,您正在创建一个将
file
读取为数据URL的FileReader
reader
,然后使用该数据URL创建另一个Blob
(具有相同的内容)。 And then you even create a reader2
to get a binary string from the just constructed blob
. 然后你甚至创建一个
reader2
来从刚构建的blob
获取二进制字符串 。 However, neither the base64Image
url string part (even if btoa
-decoded to a larger string) nor the decoded.binary
string are vaild arguments to URL.createObjectURL
! 然而,无论是
base64Image
URL字符串的一部分(即使btoa
-decoded到一个更大的字符串),也不是decoded.binary
字符串是vaild参数URL.createObjectURL
!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.