js中的blob,图片base64URL,file之间的关系
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之间的关系的更多相关文章
- js中prototype,__proto__,constructor之间的关系
首先,我们需要了解三点: 1. 只要创建一个任意新函数,就会根据一个prototype属性,该属性指向函数的原型对象: 2. 每一个原型对象都会自动获得一个constructor属性,该属性只想pro ...
- 分享js中 pageY = clientY + document.body.scrollTop 之间的关系
//这里没有考虑兼容ie模式下 兼容一般主流浏览器 var $1 = document.getElementById('main') $1.onclick = function(e){ console ...
- js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是 ...
- js中从blob提取二进制
文章结构: 一.所遇到的问题 二.解决方法 一. 服务器端通过websocket向浏览器端传输图片(二进制),需要根据不同的图片把图片显示在不同的位置,可行的一个方法是先把图片转化成二进制数组,再把二 ...
- storm中worker、executor、task之间的关系
这里做一些补充: worker是一个进程,由supervisor启动,并只负责处理一个topology,所以不会同时处理多个topology. executor是一个线程,由worker启动,是运行t ...
- FFMPEG中最要害的结构体之间的关系
FFMPEG中最关键的结构体之间的关系 http://www.myexception.cn/program/1404591.html FFMPEG中结构体很多.最关键的结构体可以分成以下几类: a) ...
- Android进阶笔记08:Android 中Activity、Window和View之间的关系
1. Android 中Activity.Window和View之间的关系(比喻): Activity像一个工匠(控制单元),Window像窗户(承载模型),View像窗花(显示视图) LayoutI ...
- C++中 0 与 NULL 与 nullptr之间的关系,nullptr_t 的实现
C++中 0 与 NULL 与 nullptr之间的关系,nullptr_t 的实现 来源 http://blog.csdn.net/Virtual_Func/article/details/4975 ...
- js中元素(图片)切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...
- JS 之原型,实例,构造函数之间的关系
JS是面向对象的语言,函数也是对象.下面大致介绍下实例,原型与构造函数之间的关系. 构造函数模式 function Person(name,age){ this.name = name; this.a ...
随机推荐
- Android短信大全
使用ListView实现点击条目跳转短信界面,并将内容传至短信页面: 代码如下:activity_main.xml: <?xml version="1.0" encoding ...
- 实验九 在JSP中使用数据库
实验性质:验证性 实验学时: 1学时 实验地点: 一 .实验目的与要求 1. 掌握在JSP中使用数据库的方法. 2. 掌握JSP对数据库的基本操作:增.删.改.查. 二. 实验内容 1.JSP访问数据 ...
- Docker容器安装
使用脚本安装 Docker 1.使用 sudo 或 root 权限登录 Centos. 2.确保 yum 包更新到最新. $ sudo yum update 3.执行 Docker 安装脚本. $ c ...
- Escape HDU - 3605(归类建边)
Escape Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Subm ...
- day3 python简介 IDE选择
优势趋势基于c语言.c语言是编译底层语言,c跨平台需要重新编译,pyh可以直接使用c的库文件,比起c有绝对的开发效率目前为全球语言使用频率为第四名,第一java.从几年前第8名已超越php第6名. 擅 ...
- windows 系统错误码总结
windows 错误码大全: 操作成功完成. 功能错误. 系统找不到指定的文件. 系统找不到指定的路径. 系统无法打开文件. 拒绝访问. 句柄无效. 存储控制块被损坏. 存储空间不足,无法处理此命令. ...
- 通过shell调用rtx接口
本脚本可获取服务器Site值和服务器ip,执行之后可通过RTX推送系统消息 脚本例子如下: #!/bin/bash function alarm(){ user="$1" cont ...
- mysql 提示表损坏处理方法
公司网站有些页面打不开,第二次出现这个情况 重启数据库,提示有一个表crashed:这是第二次出现这个问题,这个时候,进入数据库文件目录输入:myisamchk -r "Table_Nam ...
- Android 性能优化提示
原文 http://developer.android.com/guide/practices/design/performance.html 性能优化 Android应用程序运行的移动设备受限于其运 ...
- 【转】无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) ubuntu 安装vim 及遇到的错误处理
今天,处理完问题,闲来无事,打算在虚拟机中的Ubuntu中练习shell脚本编写. 无奈,虚拟机系统所装的只有vi,这个编辑软件对于我们来说还是比较不习惯的,所以打算安装vim.好了,闲言少叙. 安装 ...