ArrayBuffer and Base64

Posted 前端小小菜

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ArrayBuffer and Base64相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>ArrayBuffer and Base64</title>
</head>
<body>
    <img id="bbf" src="" />
    <img id="bbf2" src="" />
    <script>
    /**
     * Base64字符串转成ArrayBuffer数组 
     * @param {String} base64
     */
    function base64ToArrayBuffer(base64) {
        var binary_string =  window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++){
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    }

    /**
     * ArrayBuffer数组转成Base64字符串 
     * @param {ArrayBuffer} buffer
     */
    function arrayBufferToBase64(buffer){
        var binary = ‘‘;
        var bytes = new Uint8Array(buffer);
        var len = bytes.byteLength;
        for (var i = 0; i < len; i++){
            binary += String.fromCharCode(bytes[i]);
        }
        return window.btoa( binary );
    }

    window.onload = function(){
        var buff = base64ToArrayBuffer(base64Img.split(‘,‘)[1]);
        var _blob = new Blob([buff]);
        var imageURI = window.URL.createObjectURL(_blob);
        var imgobj = document.getElementById("bbf");
        imgobj.onload = function(){window.URL.revokeObjectURL(this.src);};//清除释放
        imgobj.setAttribute("src", imageURI);

        var imgobj = document.getElementById("bbf2");
        imgobj.setAttribute("src", base64Img);
    }
    var base64Img = "data:image/gif;base64,R0lGODlhGAAYAPfaAOtxR/FJAPdPAPlRAO5GAPNLAP/9/PtUAP6UW/RMAO9HAO1EAOY9AP/axuhAAPZOAOVGD/VNAPhQAPdOAO9GAPlSAOU9AOpBAPNKAP6WXutCAPpTAOlhM/+icOtiLvtrI/l0NPh0N+17U/ZyN/6sgf7s5P+whe9UFu15UOdGDPyMVPGZe/6tgfmIVPyRXedLE/lfFP6ERPdWC/6hb/d6QvJUD/JtNO1GA/+yieplOP1kEv7l2P6QWOpIC/VpK+ZRHf/v6PdsLf1uI/uQXfvi2v2aZ/yHTOU+Av6aZvi/qPqOW/qDS/6CQvFNBvuES/9tHu+FX/5qGv6SWPexlP/h0f/Bn/18OexHB/dYD/eBTPtoH/qGUP+ugvl9Q+lBAeZMGPyKUf/ezP+ga+ZHEOtMDvzo4ehfMOtkM/97NPyid//BoPpSAPlwMP7j1eM7AeRCCuVDCuZQHPJkKv3o3+lBAPjPwf7Iq/ppI/6JTf/IquRBCf/j1PSRaf2PVuplN/2yjf6FRuM6AOtgLfvg1fyERvpgFv/FpeM8AupICfuIUPhaEvxzLfuaavZYEOY/A/W8qP6JS+pHCOc+AP7VwPt8Pfyaafzq5Pzl3PvYye1fJ/1+POtfKvS0nv/u5PtlGehECP2UYOdCBvx1MPNyPft+QuxWHPCXeOpCAP3KseQ+Bf2cavyyjvdSBP6bZelSGuZBBuVKFf6da+tuQ/Z8R/yRW/RQBvVwNf/GpvtVAPFkKf+5kvuke/+8l/fGtP6OU/eacu1mMv/Gp+pDAv+whO5kL+ZMF/+7l/7Dpf1YA/ypgfx6OOdZKPRLAOhSG/+zivBXGPBNCf+bZPNpLf/n2/NMAf6YY/94LvyHS/ZjIP7QuAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAANoALAAAAAAYABgAAAj/ALUJHEiwoMGDCBMqXMiwocOHBHdcQ6YDUgOCbYYEkcZn0EFUyrJ12qPLWhWBxzw5aTErF6JeBUvcATKNSpgGatDwMiYEFCMlWUYRc2SJ4K5kk+wYCpbn1rAnUaqpcrGFho1MKVYQZLPqDwkWJnA44xItAxJaibqMkFMqlBmCWNJUKhJrRocOYlpl6GOEVAgfzyJZgECw0RIwKnggWCzFFx5ClEBgq3HDwRE9BG0pgqFlkRUmgGJoEvWhkAxqCjRIgpOD4K9arAZsOHAAF+0NAwQkCLDAy4tipgjOCZBggoQBFdZUGCBhwm4Cwlz5eVOGoAFMTQpEeCCg+4MIBQIQZLjiAcWXOgYMToEWAEMBZgUwBFCwgMwmKD84ITSQ5AQBCgpQQMACGvQgiAhxPLLQJcBccMoFdDjwSTOycEBEQwacwQADFrwyxjIcQKQNAIe4AQEsAIgoEACBpJKiiiu+CKNDAQEAOw==";
</script>
</body>
</html>

 

以上是关于ArrayBuffer and Base64的主要内容，如果未能解决你的问题，请参考以下文章

uniapp解决图形验证码问题及arraybuffer二进制转base64格式图片

微信小程序 base64ToArrayBuffer

在 chrome IOS 选项卡上打开 base64 pdf

JS 文件base64FileBlobArrayBuffer互转

错误记录Android 应用配置第三方 so 动态库 ( /data/app/comxxx==/base.apk/lib/arm64-v8a]couldn‘t find “libx.so“ )(代码片

Egret之JSZip解析图片