Comment utiliser le front-end pour télécharger des images base64 (code)

Le contenu de cet article explique comment utiliser le front-end pour implémenter le téléchargement d'images base64 (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Contexte

Au cours du processus de développement d'un projet, il est souvent nécessaire d'exporter des images, en particulier pour les applications avec des graphiques, qui nécessitent généralement le téléchargement et l'exportation de graphiques.
Il est relativement simple de télécharger des images base64 dans les nouveaux navigateurs comme Chrome :

1. Créer une balise a

2. Modifier un href l'attribut de la balise se voit attribuer l'encodage base64 de l'image

3. Spécifiez l'attribut de téléchargement de la balise a comme nom du fichier téléchargé

4. pour déclencher l'événement Click a tag

Cependant, cet ensemble de logique ne fonctionne pas sous IE. Écrire de cette manière signalera directement une erreur.
Il doit donc être traité séparément sous IE. Ici, IE fournit une méthode distincte lors du traitement de ce type de fichier : window.navigator.msSaveOrOpenBlob(blob, download_filename) L'appel de cette méthode peut directement déclencher le téléchargement d'IE, ce qui est le cas. plus pratique. La méthode spécifique est la suivante :

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

Code d'implémentation global

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

Recommandations associées :

Image décodée basée sur php base64 et restauration d'image cryptée exemple,

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!