首页 文章

使用base64编码/解码图像中断图像

提问于
浏览 次
8

我正在尝试编码和解码图像 . 我正在使用FileReader的readAsDataURL方法将图像转换为base64 . 然后将其转换回来我尝试使用 readAsBinaryString() 和 atob() 没有运气 . 有没有另一种方法来保持图像没有base64编码吗？

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

知道我在这里做错了吗？

Sample Code 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
});

谢谢！

javascript fileapi

2 回答

  • 1

    经过一些研究后，我发现了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

    回复于
  • 13

    URL.createObjectURL期望Blob（可以是File）作为其参数 . 不是字符串 . 这就是 URL.createObjectURL(file) 有效的原因 .

    相反，您正在创建FileReader reader ，将 file 读取为数据网址，然后使用该数据网址创建另一个 Blob （具有相同的内容） . 然后你甚至创建一个 reader2 来从刚构造的 blob 中获取二进制字符串 . 但是， base64Image url字符串部分（即使 btoa - 解码为更大的字符串）和 decoded.binary 字符串都不是 URL.createObjectURL 的参数！

    回复于

相关问题