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

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

后端返回的数据如下:

image:"iVBORw0KGgoAAAAN.....",
title:"ai_0001"
阅读 3.3k
3 个回答

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 思否面试闯关挑战赛,欢迎正在阅读的你也加入。

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

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);

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 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
推荐问题
宣传栏