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

最新推荐文章于 2025-01-14 17:35:25 发布

原创最新推荐文章于 2025-01-14 17:35:25 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #canva可画

本文介绍了如何将HTML5canvas绘制的图像转化为base64格式的数据，然后封装成File对象，以便于文件下载或上传。作者展示了将canvas内容转换为PNG格式的步骤，并提供了相应的函数实现。

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

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

二、封装数据转化的函数

   // 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 })
    }

三、调用函数

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