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

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

base64解码编码:atob/btoa

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

代码语言：javascript复制

var str = 'RUNOOB'
var enc = window.btoa(str)
var dec = window.atob(enc)

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

DataURL转二进制:Base64/Uint8Array 

代码语言：javascript复制

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复制

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复制

var s = "            

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

html5

0 人点赞