vue.js lädt Bilder entsprechend der Bild-URL herunter

vue.js lädt Bilder entsprechend der Bild-URL herunter

Als ich kürzlich an einem Frontend-Docking-Funktionsmodul für vue.js arbeitete, musste ich eine Funktion zum Herunterladen von Bildern implementieren. Das Backend gab eine Zeichenfolge mit Bild-URLs zurück. Ich probierte viele Methoden aus und stellte fest, dass der Effekt beim Klicken auf „Herunterladen“ darin bestand, zu einer neuen Bild-Webseite zu springen. Nach einigem Nachdenken löste ich dieses Problem schließlich:

Dies sind die vom Backend zurückgegebenen JSON-Daten (die IP-Adresse ist verschlüsselt, um den Verlust wichtiger Informationen zu verhindern):

Meine Referenz in HTML sieht folgendermaßen aus:

<a @click="downCom" >
                Lizenz herunterladen<i class="icon-down"></i>
              </a>

Methode zum Herunterladen von Bildern in der vue.js-Methode:

downCom() {
      lass das = dies;
      dies.$http.files().then(res => {
        lassen Sie hreLocal="";
        hreLocal = res.data.data.url;
        dies.downloadByBlob(hreLocal,"Bild")

      });
    },

Die folgende Methode kann direkt verwendet werden. Übergeben Sie dieser Methode einfach die URL Ihres Bildes, und Sie können vue.js implementieren, um das Bild herunterzuladen.

downloadByBlob(URL,Name) {
    let image = neues Bild()
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = URL
    bild.onload = () => {
      let canvas = document.createElement('canvas')
      Leinwandbreite = Bildbreite
      Leinwandhöhe = Bildhöhe
      lass ctx = canvas.getContext('2d')
      ctx.drawImage(Bild, 0, 0, Bildbreite, Bildhöhe)
      canvas.toBlob((blob) => {
        let url = URL.createObjectURL(blob)
        herunterladen (URL, Name)
        // Geben Sie das URL-Objekt nach der Verwendung frei URL.revokeObjectURL(url)
      })
    }
  },

Die Methode download(url,name) hat den Namen:

Funktion herunterladen(href, Name) {
  let eleLink = document.createElement('a')
  eleLink.download = Name
  eleLink.href = href
  eleLink.click()
  eleLink.entfernen()
}

Nachdem Sie den obigen Code eingegeben haben, können Sie Bilder herunterladen, anstatt sie zu durchsuchen.

Zum Schluss können Sie erfolgreich auf das Bild klicken, um es herunterzuladen. Der Effekt ist wie folgt:

Dies ist das Ende dieses Artikels über das Herunterladen von Bildern durch vue.js gemäß der Bild-URL. Weitere relevante Inhalte zum Herunterladen von Bildern über die URL von vue.js finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • JavaScript-Datenübertragung zwischen verschiedenen Seiten (URL-Parametererfassung)
  • So entfernen Sie jsessionid nach der URL in Springboot
  • Einige wunderbare Verwendungsmöglichkeiten von URL-Objekten in JavaScript
  • JavaScript-Bibliothek urlcat URL-Builder-Bibliothek

<<:  Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux

>>:  Detaillierte Erläuterung der benutzerdefinierten MySQL-Funktionen und gespeicherten Prozeduren

Artikel empfehlen

Das WeChat-Applet realisiert den Effekt des Siebschüttelns

In diesem Artikel wird der spezifische Code des W...

Vergessen Sie nicht, den HTML-Tag zu schließen

Das Erstellen von Webseiten, die Webstandards ents...

Zusammenfassung der 10 am häufigsten gestellten Fragen in Linux-Interviews

Vorwort Wenn Sie sich auf die Stelle eines Betrie...

Erfahren Sie, wie Sie eine MySQL-Datenbank auf dem Mac installieren

Laden Sie MySQL für Mac herunter: https://downloa...

Spezifische Methode zum Anzeigen von Benutzerautorisierungsinformationen in MySQL

Spezifische Methode: 1. Öffnen Sie die Eingabeauf...

Detaillierte Erläuterung der JavaScript-Programmschleifenstruktur

Inhaltsverzeichnis Struktur auswählen Schleifenst...

Wie die MySQL Select-Anweisung ausgeführt wird

Wie wird die MySQL-Select-Anweisung ausgeführt? I...

So bedienen Sie JSON-Felder in MySQL

MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...

JavaScript zum Erzielen eines Klickbild-Flip-Effekts

Ich habe kürzlich an einem Projekt zur Gesichtser...

Detaillierte Erklärung der Verwendung des chmod-Befehls in Linux

chmod-Befehlssyntax Dies ist die korrekte Syntax ...

So installieren und konfigurieren Sie einen FTP-Server in CentOS8.0

Nach der Veröffentlichung von CentOS8.0-1905 habe...

Implementierungsschritte zum Erstellen eines lokalen Webservers auf Centos8

1 Übersicht System CentOS8, verwenden Sie httpd, ...