Vorwort: Die Bild-Download-Funktion muss im Projekt implementiert werden. Das erste, was mir in den Sinn kommt, ist die Verwendung des Download-Attributs des a-Tags. Beim Testen unter verschiedenen Browsern wird jedoch festgestellt, dass einige Browser sind ungültig und zeigen nach dem Klicken direkt eine Vorschau des Bildes an. Daher habe ich eine andere Methode zum Herunterladen von Bildern gefunden, die mit verschiedenen Browsern kompatibel ist, nämlich die Verwendung von Canvas zum Verarbeiten und Herunterladen von Bildern.
1. Klicken Sie im Projekt auf Ereignisbindung:
<a href=# @click.prevent=downloadIamge(imgsrc, name)><span>{{name}}</span></a>2. Vorgang im Klickereignis:
downloadIamge (imgsrc, name) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === 'IE' || getBrowser( ) === 'Edge') { window.navigator.msSaveBlob(blob, name) } else { const a = document.createElement('a') const body = document.querySelector('body') a.download = name || 'image' a.href = URL.createObjectURL(blob) a.style.display = '. keine' body.appendChild(a) a.click() body.removeChild(a) window.URL.revokeObjectURL(a.href) } }) },3.this.convertUrlToBase64(url) verwendet Canvas und toDataURL, um das Bild in das Base64-Format zu konvertieren und zurückzugeben
konvertierenUrlToBase64 (url) { return new Promise((resolve, ablehn) => { const img = new Image() img.crossOrigin = 'Anonymous' img.src = url img.onload = function () { const canvas = document.createElement ('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase () const dataURL = canvas.toDataURL('image/' + ext) const base64 = { dataURL: dataURL, Typ: 'image/' + ext, ext: ext } restart(base64) } }) },Darunter: img.crossOrigin = 'Anonymous' ist die domänenübergreifende Verarbeitung von Bildern durch das Frontend;
4.this.convertBase64UrlToBlob(base64) konvertiert die Base64-Stream-Bilddatei in eine Blob-Datei
konvertierenBase64UrlToBlob (base64) { const parts = base64.dataURL.split('base64,') const contentType = parts[0].split(':')[1] const raw = window.atob(parts[1]) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) for (let i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } return new Blob([uInt8Array], { type: contentType }) },5.getBrowser() wird verwendet, um den Browser zu ermitteln und Browserkompatibilitätsprobleme zu lösen:
import { getBrowser } from '@/utils/utils'export function getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf('OPR') > -1) { return 'Opera' } if (userAgent.indexOf( 'Firefox') > -1) { return 'FF' } if (userAgent.indexOf('Trident') > -1) { return 'IE' } if (userAgent.indexOf('Edge') > -1) { return 'Edge' } if (userAgent.indexOf('Chrome') > -1) { return 'Chrome' } if (userAgent.indexOf('Safari' ) > -1) { return 'Safari' }}6. Wenn es sich um einen IE- oder Edge-Browser handelt, können Sie den Download direkt mit window.navigator.msSaveBlob(blob, name) abschließen.
Haftungsausschluss: Aufgrund von Sicherheitsbeschränkungen im iOS-System ist die obige Methode unter iOS ungültig.
Das Obige ist das Problem des Herunterladens von Bildern und der Browserkompatibilität, die im Aufnahmeprojekt verwendet werden. Die Wissenspunkte und Prinzipien, die mit Base64 und Blob verbunden sind, sind noch nicht sehr klar. Sie müssen es studieren, wenn Sie Zeit haben ; Willkommen zum Testen und Feedback. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.