Préface : La fonction de téléchargement d'images doit être implémentée dans le projet. La première chose qui vient à l'esprit est d'utiliser l'attribut download de la balise a pour y parvenir. Cependant, lors de tests sous différents navigateurs, il s'avérera que certains navigateurs. ne sont pas valides et prévisualiseront directement l'image après avoir cliqué. Par conséquent, allez en ligne, j'ai trouvé une autre méthode pour télécharger des images compatible avec différents navigateurs, qui consiste à utiliser Canvas pour traiter les images et les télécharger ;
1. Cliquez sur la liaison d'événement dans le projet :
<a href=# @click.prevent=downloadIamge(imgsrc, name)><span>{{name}}</span></a>2. Opération en cas de clic :
downloadIamge (imgsrc, nom) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === 'IE' || getBrowser( ) === 'Bord') { window.navigator.msSaveBlob(blob, nom) } else { const a = document.createElement('a') const body = document.querySelector('body') a.download = nom || 'image' a.href = URL.createObjectURL(blob) a.style.display = ' aucun' body.appendChild(a) a.click() body.removeChild(a) window.URL.revokeObjectURL(a.href) } }) },3.this.convertUrlToBase64(url) utilise canvas et toDataURL pour convertir l'image au format base64 et la renvoyer
convertUrlToBase64 (url) { return new Promise ((résolution, rejet) => { const img = new Image() img.crossOrigin = 'Anonyme' 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, tapez : 'image/' + ext, ext : ext } solve(base64) } }) },Parmi eux : img.crossOrigin = 'Anonymous' est le traitement inter-domaines des images par le front-end ;
4.this.convertBase64UrlToBlob(base64) convertit le fichier de flux image base64 en fichier blob
convertBase64UrlToBlob (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) pour (soit i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } renvoie un nouveau Blob([uInt8Array], { type : contentType }) },5.getBrowser() est utilisé pour déterminer le navigateur et résoudre les problèmes de compatibilité du navigateur :
import { getBrowser } from '@/utils/utils'export function getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf('OPR') > -1) { return 'Opera' } if (userAgent.indexOf( 'Firefox') > -1) { renvoie 'FF' } if (userAgent.indexOf('Trident') > -1) { renvoie 'IE' } if (userAgent.indexOf('Bord') > -1) { return 'Bord' } if (userAgent.indexOf('Chrome') > -1) { return 'Chrome' } if (userAgent.indexOf('Safari' ) > -1) { retourner 'Safari' }}6. S'il s'agit d'un navigateur IE ou Edge, vous pouvez utiliser directement window.navigator.msSaveBlob(blob, name) pour terminer le téléchargement ;
Avis de non-responsabilité : en raison de restrictions de sécurité dans le système iOS, la méthode ci-dessus n'est pas valide sur iOS ;
Ce qui précède concerne le problème du téléchargement des images et de la compatibilité du navigateur utilisé dans le projet d'enregistrement. Les points de connaissance et les principes impliqués dans base64 et blob ne sont pas encore très clairs. Vous devez l'étudier lorsque vous avez le temps. L'ensemble de la méthode est efficace dans les tests personnels. ; bienvenue pour le tester et vos commentaires. J'espère également que tout le monde soutiendra le réseau VeVb Wulin.