Table des matières
Contexte
Code d'implémentation global
Maison interface Web js tutoriel Comment utiliser le front-end pour télécharger des images base64 (code)

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

Sep 14, 2018 pm 03:59 PM
base64 javascript 下载 图片处理

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')
Copier après la connexion

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()
  }
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les liens magnétiques Comment utiliser les liens magnétiques Feb 18, 2024 am 10:02 AM

Le lien magnétique est une méthode de lien pour télécharger des ressources, qui est plus pratique et efficace que les méthodes de téléchargement traditionnelles. Les liens magnétiques vous permettent de télécharger des ressources de manière peer-to-peer sans recourir à un serveur intermédiaire. Cet article explique comment utiliser les liens magnétiques et à quoi il faut prêter attention. 1. Qu'est-ce qu'un lien magnétique ? Un lien magnétique est une méthode de téléchargement basée sur le protocole P2P (Peer-to-Peer). Grâce à des liens magnétiques, les utilisateurs peuvent se connecter directement à l'éditeur de la ressource pour finaliser le partage et le téléchargement des ressources. Par rapport aux méthodes de téléchargement traditionnelles, magnétique

Comment télécharger des épisodes du court métrage dramatique Hongguo Comment télécharger des épisodes du court métrage dramatique Hongguo Mar 11, 2024 pm 09:16 PM

Hongguo Short Play n'est pas seulement une plate-forme pour regarder des pièces courtes, mais aussi un trésor de contenu riche, notamment des romans et d'autres contenus passionnants. C’est sans aucun doute une énorme surprise pour de nombreux utilisateurs qui aiment lire. Cependant, de nombreux utilisateurs ne savent toujours pas comment télécharger et regarder ces romans dans Hongguo Short Play. Dans ce qui suit, l'éditeur de ce site vous fournira des étapes de téléchargement détaillées, dans l'espoir d'aider tous les partenaires dans le besoin. Comment télécharger et regarder la pièce courte de Hongguo ? Réponse : [Pièce courte de Hongguo] - [Livre audio] - [Article] - [Télécharger]. Étapes spécifiques : 1. Ouvrez d'abord le logiciel Hongguo Short Drama, entrez dans la page d'accueil et cliquez sur le bouton [Écouter les livres] en haut de la page. 2. Ensuite, sur la page du roman, nous pouvons voir de nombreux contenus d'articles, ici ;

Que dois-je faire si je télécharge les fonds d'écran d'autres personnes après m'être connecté à un autre compte sur WallpaperEngine ? Que dois-je faire si je télécharge les fonds d'écran d'autres personnes après m'être connecté à un autre compte sur WallpaperEngine ? Mar 19, 2024 pm 02:00 PM

Lorsque vous vous connectez au compte Steam de quelqu'un d'autre sur votre ordinateur et que le compte de cette autre personne dispose d'un logiciel de fond d'écran, Steam téléchargera automatiquement les fonds d'écran abonnés au compte de l'autre personne après être revenu à votre propre compte. Les utilisateurs peuvent résoudre ce problème en. désactiver la synchronisation du cloud Steam. Que faire si WallpaperEngine télécharge les fonds d'écran d'autres personnes après s'être connecté à un autre compte 1. Connectez-vous à votre propre compte Steam, recherchez la synchronisation cloud dans les paramètres et désactivez la synchronisation cloud Steam. 2. Connectez-vous au compte Steam de quelqu'un d'autre auquel vous vous êtes connecté auparavant, ouvrez Wallpaper Creative Workshop, recherchez le contenu de l'abonnement, puis annulez tous les abonnements. (Si vous ne trouvez pas le fond d'écran à l'avenir, vous pouvez d'abord le récupérer, puis annuler l'abonnement) 3. Revenez à votre propre Steam

Comment télécharger des liens commençant par 115:// ? Introduction à la méthode de téléchargement Comment télécharger des liens commençant par 115:// ? Introduction à la méthode de téléchargement Mar 14, 2024 am 11:58 AM

Récemment, de nombreux utilisateurs ont demandé à l'éditeur comment télécharger des liens commençant par 115:// ? Si vous souhaitez télécharger des liens commençant par 115://, vous devez utiliser le navigateur 115. Après avoir téléchargé le navigateur 115, jetons un œil au didacticiel de téléchargement compilé par l'éditeur ci-dessous. Introduction à la façon de télécharger des liens commençant par 115:// 1. Connectez-vous à 115.com, téléchargez et installez le navigateur 115. 2. Saisissez : chrome://extensions/ dans la barre d'adresse du navigateur 115, entrez dans le centre d'extensions, recherchez Tampermonkey et installez le plug-in correspondant. 3. Saisissez dans la barre d'adresse du navigateur 115 : Grease Monkey Script : https://greasyfork.org/en/

Comment télécharger des fichiers à partir du disque cloud 123 Comment télécharger des fichiers à partir du disque cloud 123 Feb 23, 2024 pm 08:58 PM

Le disque cloud 123 peut télécharger de nombreux fichiers, alors comment télécharger des fichiers spécifiquement ? Les utilisateurs peuvent sélectionner le fichier qu'ils souhaitent télécharger et cliquer pour télécharger, ou cliquer avec le bouton droit sur le fichier et sélectionner télécharger. Cette introduction à la méthode de téléchargement de fichiers à partir du disque cloud 123 peut vous expliquer comment le télécharger. Les amis qui n'y connaissent pas grand-chose devraient se dépêcher et y jeter un œil ! Comment télécharger des fichiers à partir de 123 Cloud Disk 1. Ouvrez d'abord le logiciel, cliquez sur le logiciel qui doit être téléchargé, puis il y aura un bouton de téléchargement dessus. 2. Ou cliquez avec le bouton droit sur le logiciel et vous pourrez voir le bouton de téléchargement dans la liste. 3. Il y aura une fenêtre de téléchargement, sélectionnez l'emplacement que vous souhaitez télécharger. 4. Après la sélection, cliquez sur Télécharger pour télécharger ces fichiers.

Comment télécharger des fichiers Baidu Netdisk Comment télécharger des fichiers Baidu Netdisk Feb 23, 2024 pm 06:20 PM

Comment télécharger les fichiers Baidu Netdisk ? Vous pouvez télécharger les fichiers requis dans Baidu Netdisk, mais la plupart des utilisateurs ne savent pas comment télécharger des fichiers dans Baidu Netdisk. Voici ensuite le schéma expliquant comment télécharger les fichiers Baidu Netdisk présenté par l'éditeur aux utilisateurs. Tutoriel texte, les utilisateurs intéressés viennent jeter un œil ! Comment télécharger les fichiers Baidu Netdisk 1. Ouvrez d'abord Baidu Netdisk et recherchez le fichier qui doit être téléchargé ; 2. Cliquez ensuite sur le bouton [Télécharger] dans la barre d'outils comme indiqué ci-dessous ; Télécharger] pour terminer Les téléchargements de fichiers peuvent être ouverts à tout moment.

Introduction à la façon de télécharger et d'installer le jeu superpeople Introduction à la façon de télécharger et d'installer le jeu superpeople Mar 30, 2024 pm 04:01 PM

Le jeu superpeople peut être téléchargé via le client Steam. La taille de ce jeu est d'environ 28 Go. Le téléchargement et l'installation prennent généralement une heure et demie. Voici un tutoriel de téléchargement et d'installation spécifique pour vous ! Nouvelle méthode pour postuler aux tests fermés globaux 1) Recherchez "SUPERPEOPLE" dans la boutique Steam (téléchargement du client Steam) 2) Cliquez sur "Demander l'accès aux tests fermés SUPERPEOPLE" en bas de la page de la boutique "SUPERPEOPLE" 3) Après avoir cliqué sur le bouton de demande d'accès, le jeu "SUPERPEOPLECBT" peut être confirmé dans la bibliothèque Steam 4) Cliquez sur le bouton d'installation dans "SUPERPEOPLECBT" et téléchargez

Comment télécharger le disque réseau Quark en local ? Comment enregistrer les fichiers téléchargés depuis Quark Network Disk sur l'ordinateur local Comment télécharger le disque réseau Quark en local ? Comment enregistrer les fichiers téléchargés depuis Quark Network Disk sur l'ordinateur local Mar 13, 2024 pm 08:31 PM

De nombreux utilisateurs ont besoin de télécharger des fichiers lorsqu'ils utilisent Quark Network Disk, mais nous souhaitons les enregistrer localement, alors comment configurer cela ? Laissez ce site présenter aux utilisateurs en détail comment enregistrer les fichiers téléchargés à partir de Quark Network Disk sur l'ordinateur local. Comment enregistrer les fichiers téléchargés depuis le disque réseau Quark sur votre ordinateur local 1. Ouvrez Quark, connectez-vous à votre compte et cliquez sur l'icône de liste. 2. Après avoir cliqué sur l'icône, sélectionnez le disque réseau. 3. Après avoir accédé à Quark Network Disk, cliquez sur Mes fichiers. 4. Après avoir accédé à Mes fichiers, sélectionnez le fichier que vous souhaitez télécharger et cliquez sur l'icône à trois points. 5. Cochez le fichier que vous souhaitez télécharger et cliquez sur Télécharger.

See all articles