프런트 엔드를 사용하여 base64 이미지(코드)를 다운로드하는 방법

이 글의 내용은 Base64 이미지 다운로드(코드)를 구현하기 위한 프런트엔드 방법에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Background

프로젝트 개발 과정에서 이미지를 내보내야 하는 경우가 종종 있습니다. 특히 차트가 있는 애플리케이션의 경우 일반적으로 차트를 다운로드하고 내보내야 합니다.
Chrome과 같은 새 브라우저에서는 base64 이미지를 다운로드하는 것이 비교적 쉽습니다.

1. 태그 만들기

# 🎜🎜 #
2. a 태그의 href 속성을 이미지의 base64 인코딩에 할당

3. a 태그의 다운로드 속성을 다운로드한 파일의 이름으로 지정 file#🎜🎜 #

a 태그의 클릭 이벤트 트리거
그러나 이 논리 세트는 다음에서 작동하지 않습니다. IE. 이런 식으로 작성하면 오류를 보고하는 것이 간단해집니다.

그래서 IE는 별도로 처리해야 합니다. 여기서 IE는 이러한 종류의 파일을 처리할 때 별도의 메서드(window.navigator.msSaveOrOpenBlob(blob, download_filename))를 제공합니다. 이 메서드를 호출하면 IE 다운로드가 직접 트리거될 수 있으므로 더 좋습니다. . 편리한. 구체적인 방법은 다음과 같습니다.

// 截取base64的数据内容（去掉前面的描述信息，类似这样的一段：data:image/png;base64,）并解码为2进制数据
var bstr = atob(imgUrl.split(',')[1]) 
// 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
var n = bstr.length 
// 创建一个Uint8Array类型的数组以存放二进制数据
var u8arr = new Uint8Array(n) 
// 将二进制数据存入Uint8Array类型的数组中
while (n--) {
  u8arr[n] = bstr.charCodeAt(n) 
}
// 创建blob对象
var blob = new Blob([u8arr])
// 调用浏览器的方法，调起IE的下载流程
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')

전체 구현 코드

  // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
  const imgUrl = 'data:image/png;base64,...'
  // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
  if (window.navigator.msSaveOrOpenBlob) {
    var bstr = atob(imgUrl.split(',')[1])
    var n = bstr.length
    var u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    var blob = new Blob([u8arr])
    window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
  } else {
    // 这里就按照chrome等新版浏览器来处理
    const a = document.createElement('a')
    a.href = imgUrl
    a.setAttribute('download', 'chart-download')
    a.click()
  }

관련 권장 사항:

php 기반 base64 디코딩 이미지 및 암호화된 이미지 복원 예시,

위 내용은 프런트 엔드를 사용하여 base64 이미지(코드)를 다운로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!