本文介绍: Uint8Arraybase64注意: 二进制数组并不是真正的js各种数据流之间的格式转换数组,而是类似数组对象

JS各种数据流之间的格式(ArrayBuffer、Uint8Array、Blob、 File、DataURL)相互转换应用

前端网页 File 上传下载,Canvas 保存图片,Ajax 和 Fetch 二进制传输,PDF 预览浏览器上 WebAssembly 的应用 等等都需要到 ArrayBuffer 和 Blob 。

API介绍

属性名称 读/写 描述
size 只读 Blob 对象中所包含数据大小字节)。
type 只读 一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。例如 “image/png”.

注意: 二进制数组并不是真正的
js各种数据流之间的格式转换数组,而是类似数组的对象。

字符与ArrayBuffer,Uint8Array相互转换

1、TextEncoder => ArrayBuffer

let encoder = new TextEncoder();

// 字符 转 Uint8Array
let uint8Array = encoder.encode("你好啊");

// Uint8Array 转 ArrayBuffer
let arrayBuffer = uint8Array.buffer

2、Blob => ArrayBuffer

let str = 'hello,你好吗?'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
blob.arrayBuffer().then(buffer=>{
  // ArrayBuffer
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
})

3.FileReader => ArrayBuffer

let str = 'hello,你好吗?'
let blob = new Blob([str],{type:'text/plain;charset=utf-8'});
let utf8decoder = new TextDecoder()
let fr = new FileReader()
fr.readAsArrayBuffer(blob)
fr.onload = function(res) {
  // ArrayBuffer
  let buffer = fr.result
  console.log(buffer)
  let text = utf8decoder.decode(buffer)
  // String
  console.log(text)
}

转换及应用

1.将file转换成DataURL,实现地图上传预览

 <input type="file" id="file"> 
 <img id="img">
let img = document.getElementById('img')
 let file = document.getElementById('file')
 file.onchange = function () {
   let imgFile = this.files[0]
   img.src = URL.createObjectURL(imgFile)
   img.onload = function () {
     URL.revokeObjectURL(this.src)
   }
 }
  • 利用FileReader.readAsDataURL()
let img = document.getElementById('img')
let file = document.getElementById('file')
file.onchange = function (e) {
  let imgFile = this.files[0]
  let fileReader = new FileReader()
  fileReader.readAsDataURL(imgFile)
  fileReader.onload = function () {
    img.src = this.result
  }
}

2、将DataURL转成file

function dataURLToFile (dataUrl, fileName) {
  const dataArr = dataUrl.split(',')
  const mime = dataArr[0].match(/:(.*);/)[1]
  const originStr = atob(dataArr[1])
  return new File([originStr], fileName, { type: mime })
}
dataURLToFile('data:text/plain;base64,YWFhYWFhYQ==', '测试文件')

// File {name: '测试文件', lastModified: 1640784525620, lastModifiedDate: Wed Dec 29 2021 21:28:45 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 7, …}

3.将canvas转成DataURL,实现canvans变成图片,或生成指定格式的图片实现图片格式的转换

// html
 <input type="file" accept="image/*" id="file">

// js
document.querySelector('#file').onchange = function () {
  canvasToDataURL(this.files[0])
    .then(res => console.log(res))
}
function canvasToDataURL (file) {
  return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = URL.createObjectURL(file)
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      resolve(canvas.toDataURL('image/png', 1))
    }
  })
}

这个方法返回的是图片base64,用来生成图片的,默认png格式,也可以通过传递参数改变图片格式,还能改变图片保存的质量。

如:canvas.toDataURL(“images/jpeg”,0) ,第一个参数就是把图片编码为jpeg格式,第二个参数(0-1)就是指定图片质量,数值越大质量越高,不过对于image/png格式没法设置图片质量。

另外,chrome还支持自家的image/webp格式图片,也能设置图片质量, 实现图片压缩

4.将DataURL转成canvas

function dataUrlToCanvas (dataUrl) {
  return new Promise(resolve => {
    const img = new Image()
    img.src = dataUrl
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = this.width
      canvas.height = this.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(this, 0, 0)
      resolve(canvas)
    }
  })
}
const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUh...'
dataUrlToCanvas(dataUrl)
  .then(res => document.body.appendChild(res)

5.将canvas转成file

1.将canvas转成blob

利用canvas.toBlob()

// html
 <input type="file" accept="image/*" id="file">

// js
document.querySelector('#file').onchange = function () {
  canvasToDataURL(this.files[0])
    .then(res => console.log(res))
}
function canvasToDataURL (file) {
  return new Promise(resolve => {
    const img = document.createElement('img')
    img.src = URL.createObjectURL(file)
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0)
      canvas.toBlob(function (e) {
        resolve(e)
      }, 'image/png', 1)
    }
  })
}

2.将blob转成file
利用new File();

 function blobToFile(blob, filename, type) {
    return new File([blob], filename, { type })
 }
 
 blobToFile('test info', 'test', 'text/plain' )

 

原文地址:https://blog.csdn.net/qq_38886284/article/details/131985176

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_11881.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注