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

转载于:https://www.cnblogs.com/coder-lzh/p/9545315.html

js中的blob，图片base64URL，file之间的关系相关推荐

js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js ...
java oracle 图片_JAVA读取Oracle中的blob图片字段并显示
JAVA读取Oracle中的blob图片字段并显示近期,在给客户做一个Demo页面时,需要用JAVA读取Oracle中的blob图片字段并显示,在此过程中,遇到一些问题,例如:连接Oracle数据库 ...
webpack 在js中引入静态图片
原文链接: webpack 在js中引入静态图片上一篇: gif 屏幕录制下一篇: js 使用默认参数达到强制参数的目的在js中引入静态文件在自己实现一个tab组件时遇到这个问题,点击不同的t ...
JAVA读取Oracle中的blob图片字段并显示
转自:http://www.blogjava.net/zhangqingping/articles/JAVA.html 近期,在给客户做一个Demo页面时,需要用JAVA读取Oracle中的blob图 ...
nuxt.js中的静态图片显示不出来解决方法
nuxt.js中的静态图片显示不出来解决方法 <script> export default {data() {return {imgList: [{ name: "图1&quo ...
storm中worker、executor、task之间的关系
这里做一些补充: worker是一个进程,由supervisor启动,并只负责处理一个topology,所以不会同时处理多个topology. executor是一个线程,由worker启动,是运行t ...
GPS 数据中的精度因子(DOP)与协方差之间的关系 (参考链接)
GPS 数据中的精度因子(DOP)与协方差之间的关系参考链接: [1] evenator. libnmea_navsat_driver/driver.py [EB/OL]. https://gith ...
vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...
Web前端笔记-js中加载图片文件（vue cli中同样适用）
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...
js中元素（图片）切换和隐藏显示问题
这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...

js中的blob，图片base64URL，file之间的关系

js的base64编码和解码

base64URL 转 blob 对象，文件上传

获取file对象 ,获取base64URL

js中的blob，图片base64URL，file之间的关系相关推荐

最新文章

热门文章