js的base64编码和解码

英文是这样的:
// atob() 将base64解码
// btoa() 将字符串转码为base64
var str = 'javascript';
window.btoa(str)
//转码结果 "amF2YXNjcmlwdA=="
window.atob("amF2YXNjcmlwdA==")
//解码结果 "javascript" 中文需要特殊一下。需要用到转码 encodeURIComponent 和 decodeURIComponent console.log(window.btoa(encodeURIComponent("哈哈")))
console.log(decodeURIComponent(window.atob("JUU1JTkzJTg4JUU1JTkzJTg4")))
JUU1JTkzJTg4JUU1JTkzJTg4
哈哈

base64URL 转 blob 对象,文件上传

/**
* base64 转 blob 对象,文件上传
* 转载自:http://blog.csdn.net/hsany330/article/details/52575459
* @param dataURI
* @returns {Blob}
*
*/
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}

获取file对象 ,获取base64URL

var file=$("input[name='file']")[0];
console.log(file.files[0]) let reader = new FileReader();
reader.readAsDataURL (file1);
//reader对象的result属性存储流读取的数据
'<img src="' + reader.result + '" alt=""/>'
console.log(reader.result) // 打印出转换后的base64

js中的blob,图片base64URL,file之间的关系的更多相关文章

  1. js中prototype,__proto__,constructor之间的关系

    首先,我们需要了解三点: 1. 只要创建一个任意新函数,就会根据一个prototype属性,该属性指向函数的原型对象: 2. 每一个原型对象都会自动获得一个constructor属性,该属性只想pro ...

  2. 分享js中 pageY = clientY + document.body.scrollTop 之间的关系

    //这里没有考虑兼容ie模式下 兼容一般主流浏览器 var $1 = document.getElementById('main') $1.onclick = function(e){ console ...

  3. js中关于Blob对象的介绍与使用

    js中关于Blob对象的介绍与使用   blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...

  4. js中从blob提取二进制

    文章结构: 一.所遇到的问题 二.解决方法 一. 服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二 ...

  5. storm中worker、executor、task之间的关系

    这里做一些补充: worker是一个进程,由supervisor启动,并只负责处理一个topology,所以不会同时处理多个topology. executor是一个线程,由worker启动,是运行t ...

  6. FFMPEG中最要害的结构体之间的关系

    FFMPEG中最关键的结构体之间的关系 http://www.myexception.cn/program/1404591.html FFMPEG中结构体很多.最关键的结构体可以分成以下几类: a)  ...

  7. Android进阶笔记08:Android 中Activity、Window和View之间的关系

    1. Android 中Activity.Window和View之间的关系(比喻): Activity像一个工匠(控制单元),Window像窗户(承载模型),View像窗花(显示视图) LayoutI ...

  8. C++中 0 与 NULL 与 nullptr之间的关系,nullptr_t 的实现

    C++中 0 与 NULL 与 nullptr之间的关系,nullptr_t 的实现 来源 http://blog.csdn.net/Virtual_Func/article/details/4975 ...

  9. js中元素(图片)切换和隐藏显示问题

    这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...

  10. JS 之原型,实例,构造函数之间的关系

    JS是面向对象的语言,函数也是对象.下面大致介绍下实例,原型与构造函数之间的关系. 构造函数模式 function Person(name,age){ this.name = name; this.a ...

随机推荐

  1. PHP——运行shell命令|脚本

    内置函数 PHP | 系统程序执行 exec shell_exec passthru system 配置 打开php.ini配置文件,并从disable_function将用到的函数从禁用中删除,然后 ...

  2. Python中的numpy模块解析

    numpy 1.  创建对象 维度(dimensions):轴 轴的个数:秩(rank) Numpy最重要的一个特点就是其N维数组对象(即ndarray) 创建数组最简单的函数就是用array函数: ...

  3. 【BZOJ1015】【JSOI2008】星球大战 并查集

    题目大意 给你一张\(n\)个点\(m\)条边的无向图,有\(q\)次操作,每次删掉一个点以及和这个点相邻的边,求最开始和每次删完点后的连通块个数. \(q\leq n\leq 400000,m\le ...

  4. wstngfw IKEv2服务器配置示例

    wstngfw IKEv2服务器配置示例 移动客户端的服务器配置有几个组件: 为***创建一个证书结构 配置IPsec移动客户端设置 为客户端连接创建阶段1和阶段2 添加IPsec防火墙规则 创建** ...

  5. MT【265】a+b,ab

    已知$a+b=1$,求$(a^3+1)(b^3+1)$的最大值_____ $(a^3+1)(b^3+1)=a^3+b^3+a^3+b^3+1$ $=(a+b)^3(a^2+b^2-ab)+a^3b^3 ...

  6. 自学Python4.2-装饰器

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  7. Android 播放Gif 动画

    在Android 中是不支持直接使用Gif 图片关联播放帧动画,如下动画在Android 中是无法播放的: Android 提供了另外一种解决的办法,就是使用AnimationDrawable 这一函 ...

  8. [复习]动态dp

    [复习]动态dp 你还是可以认为我原来写的动态dp就是在扯蛋. [Luogu4719][模板]动态dp 首先作为一个\(dp\)题,我们显然可以每次修改之后都进行暴力\(dp\),设\(f[i][0/ ...

  9. 【BZOJ2125】最短路(仙人掌,圆方树)

    [BZOJ2125]最短路(仙人掌,圆方树) 题面 BZOJ 求仙人掌上两点间的最短路 题解 终于要构建圆方树啦 首先构建出圆方树,因为是仙人掌,和一般图可以稍微的不一样 直接\(tarjan\)缩点 ...

  10. 【BZOJ3142】[HNOI2013]数列(组合计数)

    [BZOJ3142][HNOI2013]数列(组合计数) 题面 BZOJ 洛谷 题解 唯一考虑的就是把一段值给分配给\(k-1\)天,假设这\(k-1\)天分配好了,第\(i\)天是\(a_i\),假 ...