<!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. Hive基础（1）---Hive是什么

    1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案.由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性,因此使用Hive构建的数据仓库也秉承了这些特性. 这是来自官方的 ...

  2. 使用SoapUI工具做get请求和post请求接口测试

    祝大家节日快乐啦. 之前写过的一篇帖子已经介绍了SoapUI工具的基本使用,所以在此不再重复讲解关于建工程.建测试套件.添加用例等操作,可查看该篇文章详解:http://www.cnblogs.com ...

  3. java 学习笔记——类之间的关系之封装、继承与多态的详解

    封装 一个封装的简单例子 封装就是把对象的属性(状态)和方法(行为)结合在一起,并尽可能隐蔽对象的内部细节,成为一个不可分割的独立单位(即对象),对外形成一个边界,只保留有限的对外接口使之与外部发生联 ...

  4. Android签名机制---签名过程

    大神文章:http://blog.csdn.net/jiangwei0910410003/article/details/50402000 一.知识点 1.数据摘要(数据指纹).签名文件,证书文件 2 ...

  5. 动态IP解析

    本文介绍两种方便获取主机动态IP的方式(DDNS,IP报告网页),并给出相应的代码实现. shell脚本获取本机IP,执行上传操作和更新DNS操作.定期执行通过crontab或者systemd等服务. ...

  6. 关于java的自动拆装箱若干细节问题

    一.首先需要了解的几个前提: 1.自动装箱过程是通过调用valueOf方法实现的(如Integer.valueOf(10)),而拆箱过程是通过调用包装器的 xxxValue方法实现的(如Integer ...

  7. string使用

    一.list和string转化 List转字符串,用逗号隔开 List<string> list = new List<string>();list.Add("a&q ...

  8. 我的three.js学习记录（三）

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  9. Noip2016愤怒的小鸟（状压DP）

    题目描述 题意大概就是坐标系上第一象限上有N只猪,每次可以构造一条经过原点且开口向下的抛物线,抛物线可能会经过某一或某些猪,求使所有猪被至少经过一次的抛物线最少数量. 原题中还有一个特殊指令M,对于正 ...

  10. JavaScript--我发现，原来你是这样的JS（引用类型不简单，且听我娓娓道来）

    一.介绍 没错,这是第五篇,到了引用类型,这次要分成两次博文了,太多内容了,这是前篇,篇幅很长也很多代码,主要讲引用类型和常用的引用类型,代码试验过的,老铁没毛病. 坚持看坚持写,不容易不容易,希望大 ...