Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData

base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData

原创
作者头像
周陆军博客
发布于 2023-05-07 10:13:10
发布于 2023-05-07 10:13:10
3K01
代码可运行
举报
文章被收录于专栏:前端博客前端博客
运行总次数:1
代码可运行

html5开发常用的对象有:FileReader  FormData File URL  Blob createObjectURL Uint8Array等,这些在日常开发中,需要做图片转base64,base64转而二进制文件,页面截图让用户下载。

base64解码编码:atob/btoa

atob() 方法用于解码使用 base-64 编码的字符串。base-64 编码使用方法是 btoa() 。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var str = 'RUNOOB'
var enc = window.btoa(str)
var dec = window.atob(enc)

var res = '编码字符串为: ' + enc + '<br>' + '解码后字符串为: ' + dec

DataURL转二进制:Base64/Uint8Array 

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function dataURLtoBlob (dataurl) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], {
    type: mime
  })
}

DataURL转文件:Uint8Array/File/charCodeAt

DataURL,如base64 图片, “data:image/png;base64,****”,逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function dataURLtoFile (dataurl, filename) {
  // 风格字符串 data:image/png;base64,****”
  var arr = dataurl.split(',')
  // 获取文件类型 data:text/plain;
  var mime = arr[0].match(/:(.*?);/)[1]
  // 解码base-64字符串
  var  bstr = atob(arr[1])
  var n = bstr.length, u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, {type: mime})
}
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

js字符串的存储方式及方法charAt(),charCodeAt(),codePointAt()用法总结

  • charAt() 方法可返回指定位置的字符(Unicode编码),中英文都是一个字符(中文需要4个字节存储)
  • charCodeAt()方法返回前两个字节和后两个字节的Unicode值
  • codePointAt()能够正确处理4个字节储存的字符,返回一个字符的码点(超过0xFFFF的字符也可以直接返回码点)
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var s = "            

            
                转载本站文章《base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData》,
                
请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/web/2019_0920_8156.html

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
base64转file文件源码记录
我们前后端交互图片的时候,一般我们是用base64进行交互的,但是很多时候我们传递图片的时候很多的后端是需要file文件格式的,而不是base64的,所以这个时候是需要进行一个简单的转变
何处锦绣不灰堆
2020/05/28
1.8K0
高拍仪SDK(文豆FastSnap)
本sdk主要适用于bs(web)架构,可支持谷歌Chrome、火狐Firefox、360极速和安全、Edge、IE10+等支持html5的多种浏览器。
用户11057749
2024/04/30
5940
混合开发 图片上传 base64转file的坑
但是在手机上传确实失败的 ,经过分析发现 手机上base64转 file 生成的file对象和pc版的不同 。
lilugirl
2019/05/28
3K0
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数,随时更新 var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // window.location.search 获取url问号后面部分 v
别盯着我的名字看
2022/06/09
5790
面试官昨天问我对base64的理解,着实被问懵了
我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。
用户3806669
2021/03/25
4.7K0
面试官昨天问我对base64的理解,着实被问懵了
谁说前端不需要懂二进制
作为一名前端,在工作中也会遇到很多有关二进制处理的需求,如 EXCEL 表格的导出,PDF 的生成,多个文件的打包,音频的处理。
山月
2020/06/18
1.2K0
图片裁切上传插件cropper的使用
图片上传格式一般是文件格式和base64格式,比较方便的是图片格式,后台可以方便的处理上传的图片。
tianyawhl
2019/11/04
2.1K0
简单的说一下人脸识别的过程及前端实现
最近写项目的时候在做一个登录的操作,但是我们因为是多端的,有小程序,有PC,后期可能还有公众号等,所以我们的登录是很多种不同的登录方式的,有最基本的账号密码登录,有微信扫码登录,有工号刷卡登录,有手机验证码登录,当然还有逼格比较高的人脸识别登录,手机验证码登录其实是一个很简单的,所以我可能会在后期写一下处理的过程,今天我们大概说一下人脸识别的一个过程,当然因我不是写后端的,所以这里是不能贴后端的源码的,但是前端的处理还是可以写一下的。
何处锦绣不灰堆
2020/05/29
1.5K0
Blob、ArrayBuffer、File、FileReader和FormData的区别
Blob、ArrayBuffer、File、FileReader、FormData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚。
码客说
2019/10/22
5.2K0
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。
pingan8787
2021/04/26
2.5K0
【JS】936- File、Blob、dataURL 和 canvas 的应用与转换
base64图片压缩并转换二进制流
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWid
我乃小神神
2021/12/07
1.9K0
自己动手用electron+vue开发博客园文章编辑器客户端【二】
在nwjs里,宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信,并没有什么特别的地方
liulun
2019/05/25
2.4K0
图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)
首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;
李维亮
2021/07/08
4.9K0
js 图片转换base64 base64转换为file对象
相关: https://www.cnblogs.com/fps2tao/p/9268380.html
全栈程序员站长
2022/07/21
9.6K1
原生JS调取PC端摄像头源码记录
今天简单的记录一个JS调取摄像头的源码,不是很难,只是为了以后可以直接拿来使用,好的废话不多说,看源码!
何处锦绣不灰堆
2020/05/28
1.9K0
vue上传文件到Minio
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/03
2K0
JS 将 base64编码的图片转化为图片文件【未测试】
需求:将string 类型的base64编码图片转化成File类型的图片文件,用于文件上传
双面人
2019/07/12
5.3K0
从web图片裁剪出发:了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像。当时两个方案摆在我面前,一个是flash,我不会。另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者。有人会疑惑,为什么不用H5的Canvas和FormData,第一要考虑ie8的兼容性,第二那时候眼界没到,这种新东西光是听听都怕。   后来随着Mobile项目越做越多,类似的功能开发得也越来越多,Canvas+FormData成为了标配方案。但做的多了却一直没有静下心来研究,浏览器怎么使用H5的方式裁剪并把文件发送出去
李海彬
2018/03/27
2.2K0
从web图片裁剪出发:了解H5中的Blob
cropperjs图片裁剪及数据提交文件流互相转换详解
cropperjs的主要功能是图片裁剪,是一款前端常用的的图片裁剪工具,可根据相关api配置裁剪出符合自己业务需要的图片,具体使用如下:
超级小可爱
2023/12/21
4750
开发中常用的JS知识点集锦
1、对象的深拷贝(一级属性拷贝和多级属性嵌套拷贝) //深拷贝函数(满足属性多级嵌套) function deepCloneObj(sourceObj){ var obj = (sourceO
tandaxia
2018/11/21
5230
相关推荐
base64转file文件源码记录
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验