Comment télécharger des images en utilisant Javascript

JavaScript est un langage de script largement utilisé qui peut être utilisé pour créer des effets dynamiques dans les navigateurs et les serveurs. Les images constituent un type de média courant dans les applications Web. Il est donc important de savoir comment télécharger des images. Dans cet article, nous explorerons comment télécharger des images à l'aide de JavaScript.

Étapes pour télécharger des images à l'aide de JavaScript :

Étape 1 : Obtenez l'URL de l'image

Pour télécharger une image, vous devez d'abord obtenir l'URL de l'image. Vous pouvez utiliser JQuery ou JavaScript natif pour obtenir l'attribut src de l'élément image. Par exemple :

let imageUrl = $('img#myImageId').attr('src');

ou

let image = document.getElementById('myImageId');
let imageUrl = image.src;

Étape 2 : Créez une requête HTTP

Utilisez l'objet XMLHttpRequest (XHR) pour envoyer une requête HTTP à le serveur et obtenez la réponse. Pour télécharger une image, vous devez créer une requête GET et utiliser l'URL de l'image comme URL demandée. Voici un exemple de code qui utilise du JavaScript natif pour créer un objet XHR :

let xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';

Notez que l'attribut réponseType est défini sur « blob ». Ce paramètre indique que la réponse doit être renvoyée en tant qu’objet Blob. Un objet Blob est un gros objet binaire semblable à un fichier qui peut être utilisé pour traiter des images, de l’audio et de la vidéo.

Étape 3 : Envoyer une requête HTTP

Pour envoyer une requête HTTP, vous devez appeler la méthode send() de l'objet XHR. Voici un exemple de code pour envoyer une requête HTTP à l'aide de JavaScript natif :

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 图片下载成功
  }
};

xhr.send();

Notez qu'avant d'appeler la méthode send(), une fonction de rappel est enregistrée, qui est appelée une fois la requête terminée. Cette fonction peut vérifier le code d'état de la demande et les données de réponse pour déterminer si le téléchargement de l'image a réussi.

Étape 4 : Enregistrez l'image

Lorsque la demande aboutit, les données de réponse doivent être enregistrées sous forme de fichier image. Les objets Blob peuvent être lus sous forme de chaînes DataURL à l’aide d’un objet FileReader.

let reader = new FileReader();
reader.onload = function() {
  let dataUrl = reader.result; // 获取DataURL字符串
  let a = document.createElement('a');
  a.href = dataUrl;
  a.download = 'myImage.jpg'; // 设置文件名
  document.body.appendChild(a);
  a.click(); // 模拟点击下载链接
};

reader.readAsDataURL(xhr.response);

Le code ci-dessus crée un lien de téléchargement qui contient la chaîne DataURL comme attribut href. Lorsque l'utilisateur clique sur le lien, un fichier appelé « myImage.jpg » est téléchargé.

À ce stade, toutes les étapes de téléchargement d'images à l'aide de JavaScript sont terminées. Le code complet est le suivant :

let imageUrl = $('#myImageId').attr('src');
let xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let reader = new FileReader();
    reader.onload = function() {
      let dataUrl = reader.result;
      let a = document.createElement('a');
      a.href = dataUrl;
      a.download = 'myImage.jpg';
      document.body.appendChild(a);
      a.click();
    };

    reader.readAsDataURL(xhr.response);
  }
};

xhr.send();

Summary

Cet article présente les étapes à suivre pour utiliser JavaScript pour télécharger des images. Il est à noter qu'avant d'envoyer une requête HTTP, vous devez obtenir l'URL de l'image et définir l'attribut réponseType de l'objet XHR sur 'blob'. Lorsque les données de réponse sont renvoyées, vous pouvez utiliser l'objet FileReader pour les convertir en chaîne DataURL et les représenter comme l'attribut href du lien de téléchargement.

Le téléchargement d'images est une fonctionnalité courante dans les applications Web. Les images peuvent être facilement téléchargées et affichées dans le navigateur à l'aide de JavaScript. Les étapes décrites dans cet article fonctionnent avec la plupart des navigateurs Web modernes et nous espérons qu'elles vous seront utiles.

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!