<!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的更多相关文章

  1. 小程序网络请求arraybuffer 转为base64

    wx.request({ url: result.tempFilePath, method: 'GET', responseType: 'arraybuffer', success: function ...

  2. ArrayBuffer转base64详解

    先贴代码: const base64String = window.btoa(String.fromCharCode(... new Uint8Array(buffer))) 看起来非常的简洁,优美. ...

  3. arrayBuffer 转base64

    var buffer = new ArrayBuffer(8);// buffer 是接收到后台的流 function _arrayBufferToBase64( buffer ) { var bin ...

  4. Zip 压缩和解压技术在 HTML5 中的应用

    JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...

  5. Zip 压缩、解压技术在 HTML5 浏览器中的应用

    JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...

  6. 两百条微信小程序跳坑指南（不定时更新）

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

  7. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 用JS获取Html中所有图片文件流然后替换原有链接

    function displayHtmlWithImageStream(bodyHtml) { var imgReg = /<img.*?(?:>|\/>)/gi; var arr ...

  9. 小程序框架WePY 从入门到放弃踩坑合集

    小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...

随机推荐

  1. 天上掉Pizza

    天上掉Pizza 时间限制: 3 Sec  内存限制: 128 MB提交: 73  解决: 48[提交][状态][讨论版] 题目描述 明明喜欢Pizza,但总是缺钱.有一天,他在报纸上阅读,他最喜爱的 ...

  2. CentOS7.3下部署Rsyslog+LogAnalyzer+MySQL中央日志服务器

    一.简介 1.LogAnalyzer 是一款syslog日志和其他网络事件数据的Web前端.它提供了对日志的简单浏览.搜索.基本分析和一些图表报告的功能.数据可以从数据库或一般的syslog文本文件中 ...

  3. ASP.NET没有魔法——第一个ASP.NET应用《MyBlog》

    创建一个ASP.NET MVC应用程序 在之前文章中介绍了ASP.NET中提供了3个开发动态网页的框架,分别是Web Form.MVC以及Web Pages,也大概介绍了它们的特点. 其中MVC对于其 ...

  4. Redis缓存项目应用架构设计二

    一.概述 由于架构设计一里面如果多平台公用相同Key的缓存更改配置后需要多平台上传最新的缓存配置文件来更新,比较麻烦,更新了架构设计二实现了缓存配置的集中管理,不过这样有有了过于中心化的问题,后续在看 ...

  5. Python实战之字符串的详细简单练习

    ['__add__', '__class__', '__contains__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__' ...

  6. Java 中静态方法 实例方法 具体方法区别与联系

    在查阅JDK文档时,经常会看到某个类的方法汇总,一般会以如下的格式列出来: 这几个标签对应的方法类型分别是什么意思呢? 1.   Static Method,静态方法,可以在不创建类实例的情况下,访问 ...

  7. Java高新技术 Myeclipse 介绍

      Java高新技术   Myeclipse 介绍 知识概述:              (1)Myeclipse开发工具介绍 (2)Myeclipse常用开发步骤详解               ...

  8. asp.net或javascript判断是否手机访问

    /// <summary> /// 判断手机用户UserAgent /// </summary> /// <returns></returns> pri ...

  9. java通过shield链接Elasticsearch

    本文mark了springboot中集成elasticsearch,并且实现连接带有shield权限管理的elasticsearch的方法. tips:首先建议java client版本和elasti ...

  10. JAVA提高四：反射基本应用

    在前面一节<http://www.cnblogs.com/pony1223/p/7659210.html>,我们学习了JAVA的反射的相关知识,那么本节我们对前面所学习的知识做一个应用相关 ...