Prefacio: La función de descarga de imágenes debe implementarse en el proyecto. Lo primero que me viene a la mente es usar el atributo de descarga de una etiqueta para lograrlo. Sin embargo, al realizar pruebas en diferentes navegadores, se encontrará que algunos navegadores. no son válidos y obtendrán una vista previa de la imagen directamente después de hacer clic. Por lo tanto, conéctese en línea y encontré otro método para descargar imágenes que es compatible con diferentes navegadores, que es usar lienzo para procesar imágenes y descargarlas.
1. Haga clic en el enlace de eventos en el proyecto:
<a href=# @click.prevent=downloadIamge(imgsrc, nombre)><span>{{nombre}}</span></a>2. Operación en evento de clic:
downloadIamge (imgsrc, nombre) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === 'IE' || getBrowser( ) === 'Borde') { ventana.navigator.msSaveBlob(blob, nombre) } más { const a = document.createElement('a') const body = document.querySelector('body') a.download = nombre || 'imagen' a.href = URL.createObjectURL(blob) a.style.display = ' none' body.appendChild(a) a.click() body.removeChild(a) ventana.URL.revokeObjectURL(a.href) } }) },3.this.convertUrlToBase64(url) usa canvas y toDataURL para convertir la imagen al formato base64 y devolverla
convertUrlToBase64 (url) { devolver nueva Promesa((resolver, rechazar) => { const img = nueva Imagen() img.crossOrigin = 'Anónimo' img.src = url img.onload = función () { const lienzo = document.createElement ('lienzo') lienzo.ancho = img.ancho lienzo.alto = img.alto const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const text = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase () const dataURL = canvas.toDataURL('image/' + text) const base64 = { dataURL: dataURL, escriba: 'imagen/' + text, text: text } resolve(base64) } }) },Entre ellos: img.crossOrigin = 'Anonymous' es el procesamiento de imágenes entre dominios por parte del front-end;
4.this.convertBase64UrlToBlob(base64) convierte el archivo de secuencia base64 de imagen en un archivo blob
convertBase64UrlToBlob (base64) { const partes = base64.dataURL.split('base64,') const contentType = partes[0].split(':')[1] const raw = window.atob(parts[1]) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) para (sea i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } devuelve nuevo Blob([uInt8Array], { tipo: contentType }) },5.getBrowser() se utiliza para determinar el navegador y resolver problemas de compatibilidad del navegador:
importar { getBrowser } de '@/utils/utils' función de exportación getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf('OPR') > -1) { return 'Opera' } if (userAgent.indexOf( 'Firefox') > -1) { devolver 'FF' } if (userAgent.indexOf('Trident') > -1) { devolver 'IE' } if (userAgent.indexOf('Edge') > -1) { devolver 'Edge' } if (userAgent.indexOf('Chrome') > -1) { devolver 'Chrome' } if (userAgent.indexOf('Safari' ) > -1) {regresar 'Safari' }}6. Si es el navegador IE o Edge, puede usar directamente window.navigator.msSaveBlob(blob, nombre) para completar la descarga;
Descargo de responsabilidad: debido a restricciones de seguridad en el sistema iOS, el método anterior no es válido en iOS;
Lo anterior es el problema de la descarga de imágenes y la compatibilidad del navegador utilizado en el proyecto de grabación. Los puntos de conocimiento y los principios involucrados en base64 y blob aún no están muy claros. Debe estudiarlo cuando tenga tiempo. Todo el método es efectivo en pruebas personales. ; bienvenido a probarlo y recibir comentarios. También espero que todos apoyen la red VeVb Wulin.