So verwenden Sie das Frontend zum Herunterladen von Base64-Bildern (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Base64-Image-Downloads (Code). Ich hoffe, dass er für Sie hilfreich ist.

Hintergrund

Während des Projektentwicklungsprozesses besteht häufig die Notwendigkeit, Bilder zu exportieren, insbesondere bei Anwendungen mit Diagrammen, die normalerweise das Herunterladen und Exportieren von Diagrammen erfordern.
Es ist relativ einfach, Base64-Bilder in neuen Browsern wie Chrome herunterzuladen:

1. Erstellen Sie ein A-Tag

2. Ändern Sie ein The href Dem Attribut des Tags wird die Base64-Kodierung des Bildes zugewiesen

3. Geben Sie das Download-Attribut des Tags a als Namen der heruntergeladenen Datei an

4. um das a-Tag-Click-Ereignis auszulösen

Diese Logik funktioniert jedoch nicht im IE. Wenn Sie auf diese Weise schreiben, wird direkt ein Fehler gemeldet.
Daher muss der IE separat verarbeitet werden, wenn er diese Art von Datei verarbeitet: window.navigator.msSaveOrOpenBlob(blob, download_filename). bequemer von. Die spezifische Methode lautet wie folgt:

// 截取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')

Gesamtimplementierungscode

  // 这里是获取到的图片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()
  }

Verwandte Empfehlungen:

PHP Base64-basiertes dekodiertes Bild und verschlüsseltes Bildwiederherstellungsbeispiel,

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Frontend zum Herunterladen von Base64-Bildern (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!