So verwenden Sie Javascript, um beim Klicken auf einen Link das Popup „Bild speichern unter' anzuzeigen

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie werden die Inhalte von Seiten immer vielfältiger. Bilder sind ein sehr wichtiges Element auf Webseiten und fast jede Webseite enthält einige Bilder. Bei einigen Bildern, die vertraulich behandelt werden müssen, möchten wir jedoch nicht, dass Benutzer sie direkt ansehen oder herunterladen, sondern die Bilder lokal speichern. In diesem Artikel erfahren Sie, wie Sie mithilfe von Javascript erkennen, dass beim Klicken auf einen Link die Meldung „Bild speichern unter“ angezeigt wird, anstatt das Bild direkt zu öffnen.

Warum müssen wir auf den Link klicken, um „Bild speichern unter“ aufzurufen?

In einigen Situationen, in denen Vertraulichkeit erforderlich ist, möchten wir nicht, dass Benutzer Bilder direkt anzeigen oder herunterladen können. Wenn das Bild direkt in die Webseite eingebettet ist, muss der Benutzer nur mit der rechten Maustaste auf das Bild auf der Seite klicken, um das Bild lokal herunterzuladen, indem es das Bild speichert. Auf diese Weise können die Sicherheit und der Datenschutz der Bilder nicht gewährleistet werden. Daher benötigen wir eine Möglichkeit, den Benutzerzugriff auf Bilder und das Herunterladen von Bildern zu kontrollieren.

Schritte zum Implementieren des Pop-ups „Bild speichern unter“ durch Klicken auf den Link

Um das Pop-up „Bild speichern unter“ durch Klicken auf den Link zu erreichen, müssen Sie die folgenden Schritte ausführen.

1. Zuerst müssen Sie einen Link in die Seite einfügen, der auf das Bild verweist, das heruntergeladen werden muss.

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

2. Als nächstes müssen Sie dem Link in Javascript ein Klickereignis hinzufügen. Wenn der Benutzer auf den Link klickt, fängt JavaScript das Ereignis ab und führt den benutzerdefinierten Code aus.

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

3. Im Click-Event muss eine Download-Funktion aufgerufen werden, um das Bild lokal zu speichern. Da JavaScript Bilder nicht direkt speichern kann, müssen wir ein virtuelles Element erstellen, dessen href-Attribut auf den Bildlink verweisen und simulieren, dass der Benutzer auf den Link klickt, um den Download durchzuführen.

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. Schließlich müssen Sie den Antwortheader auf der Serverseite festlegen und Content-Disposition auf Anhang setzen, damit der Browser die Antwort als herunterzuladende Datei betrachtet und das Dialogfeld zum Speichern öffnet.

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

Erzielen Sie den Effekt

Verwenden Sie den obigen Code, um den Effekt „Bild speichern unter“ wie folgt zu erzielen:

1. Nach dem Klicken auf den Link fängt Javascript das ursprüngliche Link-Klickereignis ab.
2. Die Download-Funktion erstellt ein virtuelles a-Element und verweist mit seinem href-Attribut auf den Bildlink.
3. Simulieren Sie das Klicken auf einen Link, um Bilder herunterzuladen.
4. Der Browser öffnet ein Dialogfeld zum Speichern und der Benutzer kann die Datei lokal speichern.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mithilfe von Javascript den Effekt erzielen, dass durch Klicken auf einen Link das Popup „Bild speichern unter“ angezeigt wird, anstatt es direkt zu öffnen. Dies wird erreicht, indem ein Klickereignis in Javascript hinzugefügt und die Download-Funktion aufgerufen wird. Gleichzeitig muss Content-Disposition auch auf der Serverseite festgelegt werden, um den Antwortheader zu steuern, damit der Browser die Antwort als herunterzuladende Datei behandelt. Dies kann die Sicherheit und Privatsphäre von Bildern wirksam schützen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Javascript, um beim Klicken auf einen Link das Popup „Bild speichern unter' anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!