如何将后端返回的base64编码，转为png并自动下载？

Question

后端返回了一串base64的编码，用户点击下载的时候，前端如何将这个base64编码转为PNG格式图片，并实现下载？

后端返回的数据如下：

image:"iVBORw0KGgoAAAAN....."，
title:"ai_0001"

Answer 1

PC端:
需要将格式拼成这样的
picSrc的格式为: data:image/png;base64,XXXXXXXXXXXX

  const a = document.createElement('a')
  const filename = 'picName.png'
  a.href = picSrc  // picSrc  是图片 base64 码，可以直接给 img 的 src 属性，展示图片
  a.download = filename
  document.body.appendChild(a)
  a.click()
  setTimeout(() => {
    document.body.removeChild(a)
  }, 1000)

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

实测可以实现，但是需要知道文件的格式。

let base64Str = `换成base64`;

const base64ConvertFile = function (urlData, filename) { // 64转file
  if (typeof urlData != 'string') {
    return;
  }
  var arr = urlData.split(',')
  var type = arr[0].match(/:(.*?);/)[1]
  var fileExt = type.split('/')[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], 'filename.' + fileExt, {
    type: type
  });
};

function download(downfile) {
  const tmpLink = document.createElement("a");
  const objectUrl = URL.createObjectURL(downfile);

  tmpLink.href = objectUrl;
  tmpLink.download = downfile.name;
  document.body.appendChild(tmpLink);
  tmpLink.click();

  document.body.removeChild(tmpLink);
  URL.revokeObjectURL(objectUrl);
};

let fileObj = base64ConvertFile(base64Str, "filename.webp")

download(fileObj);

Answer 3

Base64转图片可以用 js 如何将base64编码转图片格式 这个问答里面的回答。
然后按照正常的 URL.createObjectURL(file) 方式下载文件就可以了。

写一个简单的 Demo:

function dataURLtoFile(dataurl, filename) {
    var 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});
}


function downloadImg(url, filename) {
  const file = dataURLtoFile(url, filename)
  const aTag = document.createElement('a')
  const href = URL.createObjectURL(file)
  aTag.download = file.name
  aTag.href = href
  aTag.click()
  URL.revokeObjectURL(href)
}

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。