如何将canvas生成的图片转为文件

一、先将canvas绘制的图像通过toDataURL转为base64格式的数据

      const canvas = document.getElementById('canvas-auth-box')
      const ctx = canvas.getContext('2d')
      // .... 此处省略 绘制过程
      // 绘制完成后调用toDataURL得到base64格式的数据
      const dataURL = canvas.toDataURL('image/png')
1
2
3
4
5

二、封装数据转化的函数

   // dataURL 为base64数据 filename为文件名（必须带后缀名，如.jpg,.png）
   dataURLtoFile(dataURL, filename) {
      const arr = dataURL.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    }
1
2
3
4
5
6
7
8
9
10
11
12

三、调用函数

     // 接着在第一步的位置使用dataURLtoFile函数
      const dataURL = canvas.toDataURL('image/png')
      const name = 'home.png'
      const file = this.dataURLtoFile(dataURL, name)
      console.log(file, 'file')
1
2
3
4
5