在JS中,我们经常使用canvas.toDataURL(“image/png”)方法将canvas画布中的图画内容,转换成了base64格式的图片字符串。但是却很少去思考怎样将base64格式的图片字符串转换成file文件。然而事实上这是很容易做到的,只要你了解base64字符串的结构,以及file的生成方法原理就好了。具体代码如下所示,短短几行即可解决问题。

  function dataURLtoFile(dataurl, filename) { //将base64转换为文件
    let 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 File([u8arr], filename, {type:mime});
  }

大家直接复制粘贴就可以用了哈。dataurl就是base64格式的字符串,filename填写名称字符串,但是要记住一点就是filename字符串要带上格式。比如一张图片,你要输入“pic.png”或者“pic.jpg”,重点在于要把文件格式的后缀”.png”/“.jpg”给带上,这样一来,才能正确命名该图片文件。