Comment utiliser javascript pour afficher "enregistrer l'image sous" lorsque vous cliquez sur un lien

Avec le développement continu de la technologie Internet, le contenu des pages devient de plus en plus diversifié. Les images sont un élément très important dans les pages Web et presque toutes les pages Web contiennent des images. Cependant, pour certaines images qui doivent rester confidentielles, nous ne souhaitons pas que les utilisateurs les voient ou les téléchargent directement, mais souhaitent plutôt les enregistrer localement. Cet article explique comment utiliser Javascript pour réaliser que cliquer sur un lien fera apparaître "Enregistrer l'image sous" au lieu d'ouvrir directement l'image.

Pourquoi devez-vous cliquer sur le lien pour afficher « Enregistrer l'image sous » ?

Dans certaines situations où la confidentialité est requise, nous ne souhaitons pas que les utilisateurs puissent visualiser ou télécharger directement les images. Si l'image est directement intégrée dans la page Web, l'utilisateur n'a qu'à cliquer avec le bouton droit sur l'image sur la page pour télécharger l'image localement en enregistrant l'image. De cette manière, la sécurité et la confidentialité des images ne peuvent être garanties. Par conséquent, nous avons besoin d’un moyen de contrôler l’accès des utilisateurs aux images et leur téléchargement.

Étapes pour mettre en œuvre la fenêtre contextuelle « Enregistrer l'image sous » en cliquant sur le lien

Pour obtenir la fenêtre contextuelle « Enregistrer l'image sous » en cliquant sur le lien, vous devez suivre les étapes suivantes.

1. Vous devez d'abord insérer un lien dans la page, qui pointe vers l'image qui doit être téléchargée.

<a href="https://example.com/image.png">Download Image</a>

2. Ensuite, vous devez ajouter un événement de clic au lien en javascript. Lorsque l'utilisateur clique sur le lien, JavaScript intercepte l'événement et exécute le code personnalisé.

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  const url = this.href;
  download(url); // 下载图片
});

3. En cas de clic, une fonction de téléchargement doit être appelée pour enregistrer l'image localement. Étant donné que JavaScript ne peut pas enregistrer directement les images, nous devons créer un élément virtuel, pointer son attribut href vers le lien de l'image et simuler l'utilisateur cliquant sur le lien pour réaliser le téléchargement.

function download(url) {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = ''; // 空字符串会将文件名设置为图片的原始名称
  document.body.appendChild(a);
  a.click(); // 模拟点击a元素
  document.body.removeChild(a);
}

4. Enfin, vous devez définir l'en-tête de réponse côté serveur et définir Content-Disposition sur pièce jointe, afin que le navigateur considère la réponse comme un fichier à télécharger et affiche la boîte de dialogue de sauvegarde.

header('Content-Disposition: attachment; filename="image.png"');
readfile('image.png');

Obtenez l'effet

Utilisez le code ci-dessus pour obtenir l'effet "enregistrer l'image sous" comme suit :

1. Après avoir cliqué sur le lien, javascript intercepte l'événement de clic sur le lien d'origine.
2. La fonction de téléchargement créera un élément a virtuel et pointera son attribut href vers le lien de l'image.
3. Simulez en cliquant sur un lien pour télécharger des images.
4. Le navigateur affiche une boîte de dialogue d'enregistrement et l'utilisateur peut choisir d'enregistrer le fichier localement.

Résumé

Cet article explique comment utiliser javascript pour obtenir l'effet de cliquer sur un lien pour faire apparaître "Enregistrer l'image sous" au lieu de l'ouvrir directement. Ceci est réalisé en ajoutant un événement click en javascript et en appelant la fonction de téléchargement. Dans le même temps, Content-Disposition doit également être défini côté serveur pour contrôler l'en-tête de réponse afin que le navigateur traite la réponse comme un fichier à télécharger. Cela peut protéger efficacement la sécurité et la confidentialité des images.

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!