<!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. 初学node.js有感三

    WebStorm下的node.js 一.回顾与继续       在前面,我们知道了node.js的基本框架和思路,在这些原生环境下我们对node.js的设计思想有了比较深刻的认识,并且具有了编写大型程 ...

  2. BP算法

    1986年Rumelhart和McCelland在<并行分布式处理>中提出了BP算法,即非线性连续变换函数的多层感知器网络误差反向传播算法. 该算法的思想是:学习过程分为信号的正向传播与误 ...

  3. Deep learning：一(基础知识_1)

    本文纯转载: 主要是想系统的跟tornadomeet的顺序走一遍deeplearning; 前言: 最近打算稍微系统的学习下deep learing的一些理论知识,打算采用Andrew Ng的网页教程 ...

  4. Island Perimeter

    You are given a map in form of a two-dimensional integer grid where 1 represents land and 0 represen ...

  5. Entity Framework Code First实现乐观并发

    Entity Framework Code First实现乐观并发 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: h ...

  6. java web Servlet 学习笔记 -3 会话管理技术

     Cookie和HttpSession 什么是会话: 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 每个用户在使用浏览器与服务器进行会话的过 ...

  7. Hudson + SVN + Maven 持续集成实现自动化编译、打包、部署（over SSH 和 Deploy war/ear to a container 两种部署方式）

    下载hudson ,安装部署http://hudson-ci.org/ 将下载的hudson-3.3.3.war放到tomcat的webapps目录下并启动tomcat,输入地址访问 点击Instal ...

  8. oracle状态

    Oracle_四种状态 oracle四种状态 1.shutdown(完全关闭) 2.nomount(未加载) 3.mount(已加载) 4.open(完全打开) Shutdown状态 Shutdown ...

  9. Nodejs入门-基于Node.js的简单应用

    服务端JavaScript 众所周知的,JavaScript是运行在浏览器的脚本语言,JavaScript通常作为客户端程序设计语言使用,以JavaScript写出的程序常在用户的浏览器上运行.直至N ...

  10. vim下单行长文本的时候卡顿解决办法

    在vim编辑文件时,若单行过长,可能会导致vim卡顿,严重影响使用体验 估计是syntax匹配效率过滥导致.. 偶尔发现了一个临时的解决办法就是关掉syntax然后再打开,即在命令模式下 :synta ...