1、将blob转成file

1
2
3
4
5
export function blobToFile(blob, filename, type) {
	return new File([blob], filename, { type })
}

blobToFile('test info', 'test', 'text/plain' )

2、将file转换成DataURL

1
2
<input type="file" id="file">
<img id="img">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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)
	}
}

// or use 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
  }
}

3、将DataURL转成file

1
2
3
4
5
6
7
8
export 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, …}

4、将canvas转成DataURL

1
<input type="file" accept="image/*" id="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 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))
            }
      })
}

5、将DataURL转成canvas

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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))

6、将canvas转成blob

1
<input type="file" accept="image/*" id="file">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)
      }
})

7、将canvas转成file

将canvas转成Blob，然后将Blob转成file即可，可看最开始的文件类型转换流程图。或将canvas转成dataURL，然后将dataURL转成file即可，可看最开始的文件类型转换流程图。

8、blob转arrayBuffer

1
2
3
4
5
6
7
8
9
function blobToArrayBuffer (blob, callback) {
      const reader = new FileReader()
      reader.readAsArrayBuffer(blob)
      reader.onload = function () {
            callback(this.result)
      }
}
let blob = new Blob([1, 2, 3, 4, 5])
blobToArrayBuffer(blob, (arrayBuffer) => { console.log(arrayBuffer) })

9、arrayBuffer转blob

1
2
3
4
5
6
7
function arrayBufferToBlob (arrayBuffer, type) {
	return new Blob([arrayBuffer], { type })
}
blobToArrayBuffer(new Blob([1, 2, 3, 4, 5]), (arrayBuffer) => {
      console.log(arrayBufferToBlob(arrayBuffer, 'text/plain'))
      // Blob {size: 5, type: 'text/plain'}
})

10、 ArrayBuffer 转 base64

1
2
3
4
const arrayBufferToBase64Img = (buffer) => {
  const str = String.fromCharCode(...new Uint8Array(buffer));
  return `data:image/jpeg;base64,${window.btoa(str)}`;
}