8

我正在尝试对图像进行编码和解码。我正在使用 FileReader 的 readAsDataURL 方法将图像转换为 base64。然后将其转换回来，我尝试使用 readAsBinaryString()但atob()没有运气。是否有另一种方法可以在没有 base64 编码的情况下保留图像？

readAsBinaryString()

开始读取指定 Blob 的内容，该 Blob 可能是一个文件。当读取操作完成时，readyState 将变为 DONE，并且将调用 onloadend 回调（如果有）。那时，结果属性包含文件中的原始二进制数据。

知道我在这里做错了什么吗？

示例代码 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
});

谢谢！

4

2 回答 2

14

经过更多研究后，我从这里找到了答案， 我基本上需要将原始二进制文件包装在数组缓冲区中并将二进制字符转换为 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);
    }

完整的示例代码在这里

于 2013-02-20T19:17:09.550 回答
1

URL.createObjectURL期望 a Blob（可以是 a File）作为它的参数。不是字符串。这就是为什么URL.createObjectURL(file)有效。

相反，您正在创建一个读取为数据 url的数据，然后使用该数据 url 创建另一个（具有相同内容）。然后你甚至创建一个从刚刚构造的. 但是，url 字符串部分（即使-decoded 为更大的字符串）和字符串都不是!的有效参数。FileReader readerfileBlobreader2blobbase64Imagebtoadecoded.binaryURL.createObjectURL

于 2013-02-20T00:24:13.363 回答