base64 图片流处理

144 阅读1分钟

展示成图片

如果是纯流的话,src可以用这方式来展示

`data:image/png;base64,${xxxxxxx}`

下载图片

 

  • 需要先将流转换成blob格式,这里可以用系统自带的atob方法,其中a代表blob

  • 然后再转成二进制格式

  • 最后用 new Blob() 创建一个Blob对象

  • 创建a标签

  • 将上面转的blob对象用URL.createObjectURL 创建一个DOMString

  • 给a标签的href赋值

  • 触发click事件

const base64ToBlob = () => {
  const binaryString = atob(auditDetail?.miniProgramBase64QRCode); // Binary data string
  const rawLength = binaryString.length;
  const uInt8Array = new Uint8Array(rawLength);
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < rawLength; i++) {
    uInt8Array[i] = binaryString.charCodeAt(i);
  }
  const blob = new Blob([uInt8Array], { type: 'image/png' }); // Create a BLOB object
  return blob;
};
const downLoadFun = () => {
  const blob = base64ToBlob();
  const aa = window.document.createElement('a');
  const downUrl = window.URL.createObjectURL(blob); // 获取 blob 本地文件连接 (blob 为纯二进制对象,不能够直接保存到磁盘上)
  aa.href = downUrl;
  aa.download = '';
  aa.click();
};