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的更多相关文章
- 小程序网络请求arraybuffer 转为base64
wx.request({ url: result.tempFilePath, method: 'GET', responseType: 'arraybuffer', success: function ...
- ArrayBuffer转base64详解
先贴代码: const base64String = window.btoa(String.fromCharCode(... new Uint8Array(buffer))) 看起来非常的简洁,优美. ...
- arrayBuffer 转base64
var buffer = new ArrayBuffer(8);// buffer 是接收到后台的流 function _arrayBufferToBase64( buffer ) { var bin ...
- Zip 压缩和解压技术在 HTML5 中的应用
JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...
- Zip 压缩、解压技术在 HTML5 浏览器中的应用
JSZip 是一款可以创建.读取.修改 .zip 文件的 javaScript 工具.在 web 应用中,免不了需要从 web 服务器中获取资源,如果可以将所有的资源都合并到一个 .zip 文件中,这 ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 用JS获取Html中所有图片文件流然后替换原有链接
function displayHtmlWithImageStream(bodyHtml) { var imgReg = /<img.*?(?:>|\/>)/gi; var arr ...
- 小程序框架WePY 从入门到放弃踩坑合集
小程序框架WePY 从入门到放弃踩坑合集 一点点介绍WePY 因为小程序的语法设计略迷, 所以x1 模块化起来并不方便, 所以x2 各厂就出了不少的框架用以方便小程序的开发, 腾讯看到别人家都出了框架 ...
随机推荐
- Android打包版本号设置
之前没有设置过打包的命名,每次打包都是默认的"app-realease.apk",之后手动修改名字来显示出它是一个新版本. 晚上学习了如何配置打包名称,很简单,修改build.gr ...
- FastDFS 分布式文件系统的安装与使用
跟踪服务器:192.168.152.129 (centos1) 存储服务器:192.168.152.130 (centos2) 环境:CentOS 6.6 用户:root 数据目录:/fastdfs ...
- jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...
- Android 实现UI设计
1. 计算屏幕高度,宽度代码(Activity中) DisplayMetrics outMetrics = new DisplayMetrics(); getWindowManager().getDe ...
- webpack2使用ch9-处理模板文件 .html .ejs .tpl模板使用
1 目录展示 安装依赖 "ejs-loader": "^0.3.0","html-loader": "^0.4.5", ...
- zoj3953 Intervals 最大不重叠区间加强版 zoj排名第一~
Intervals Time Limit: 1 Second Memory Limit:65536 KB Special Judge Chiaki has n intervals ...
- Asp.Net MVC4 系列-- 进阶篇之路由(1)
创建一个路由 打开 RouteConfig.cs ,发现已经创建了一个默认路由 : routes.MapRoute( name:"Default", url:"{con ...
- 吐槽CSDN--想钱想疯了--推荐文章里面广告博文去不掉
CSDN广告手段高,广告博文删不掉! 如图所示,我自己的博客文章下面有个相关文章推荐,这是csdn新出的信息流式内容呈现方式,也没什么太大问题.只是,你在里面放广告"羊毛衫,弹力裤" ...
- 2017年十大奇葩画风的H5页面案例,原来脑洞可以这样大
每个人都是视觉动物,画面精美.体验奇特的H5,用户在内心一般都会满分打出,毫不吝啬,同时也毫不犹豫分享,因为此时的分享不掉价儿~ 今天给大家准备了十支H5,画风超级奇特,非常值得一看所有案例均可在19 ...
- 个人怎么申请微信小程序
1.打开微信公众平台(mp.weixin.qq.com).拉到中间的"账号分类",鼠标悬浮于"小程序"框中并点击"查看详情". 2.进入微信 ...