Kata Pengantar: Fungsi pengunduhan gambar perlu diimplementasikan dalam proyek. Hal pertama yang terlintas dalam pikiran adalah menggunakan atribut download dari tag a untuk mencapainya. Namun, saat pengujian di browser yang berbeda, akan ditemukan bahwa beberapa browser tidak valid dan akan langsung melihat pratinjau gambar setelah mengklik. Oleh karena itu, online. Saya menemukan metode lain untuk mendownload gambar yang kompatibel dengan browser berbeda, yaitu menggunakan kanvas untuk memproses gambar dan mendownloadnya;
1. Klik pengikatan acara di proyek:
<a href=# @click.prevent=downloadIamge(imgsrc, nama)><span>{{name}}</span></a>2. Operasi dalam acara klik:
downloadIamge (imgsrc, nama) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === 'IE' || getBrowser( ) === 'Edge') { window.navigator.msSaveBlob(blob, nama) } else { const a = document.createElement('a') const body = document.querySelector('body') a.download = nama || 'image' a.href = URL.createObjectURL(blob) a.style.display = ' tidak ada' body.appendChild(a) a.click() body.removeChild(a) window.URL.revokeObjectURL(a.href) } }) },3.this.convertUrlToBase64(url) menggunakan kanvas dan toDataURL untuk mengonversi gambar ke format base64 dan mengembalikannya
convertUrlToBase64 (url) { kembalikan Janji baru((putuskan, tolak) => { const img = Gambar baru() img.crossOrigin = 'Anonim' img.src = url img.onload = function () { const canvas = document.createElement ('kanvas') kanvas.lebar = img.lebar kanvas.tinggi = img.tinggi const ctx = kanvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase () const dataURL = kanvas.toDataURL('gambar/' + ext) const base64 = { dataURL: dataURL, ketik: 'gambar/' + ext, ext: ext } tekad(base64) } }) },Diantaranya: img.crossOrigin = 'Anonymous' adalah pemrosesan gambar lintas domain di bagian depan;
4.this.convertBase64UrlToBlob(base64) mengonversi file aliran gambar base64 menjadi file blob
convertBase64UrlToBlob (base64) { const bagian = base64.dataURL.split('base64,') const contentType = bagian[0].split(':')[1] const mentah = window.atob(bagian[1]) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) for (biarkan i = 0; i < panjang mentah; i++) { uInt8Array[i] = mentah.charCodeAt(i) } kembalikan Gumpalan baru([uInt8Array], { ketik: tipe konten }) },5.getBrowser() digunakan untuk menentukan browser dan menyelesaikan masalah kompatibilitas browser:
import { getBrowser } dari '@/utils/utils'export function getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf('OPR') > -1) { return 'Opera' } if (userAgent.indexOf( 'Firefox') > -1) { kembalikan 'FF' } if (userAgent.indexOf('Trident') > -1) { kembalikan 'IE' } if (userAgent.indexOf('Edge') > -1) { kembalikan 'Edge' } if (userAgent.indexOf('Chrome') > -1) { kembalikan 'Chrome' } if (userAgent.indexOf('Safari' ) > -1) { kembalikan 'Safari' }}6. Jika itu adalah browser IE atau Edge, Anda dapat langsung menggunakan window.navigator.msSaveBlob(blob, name) untuk menyelesaikan pengunduhan;
Penafian: Karena batasan keamanan pada sistem iOS, metode di atas tidak valid di iOS;
Di atas adalah masalah pengunduhan gambar dan kompatibilitas browser yang digunakan dalam proyek perekaman. Poin pengetahuan dan prinsip yang terkait dengan base64 dan blob belum begitu jelas. Anda harus mempelajarinya ketika Anda punya waktu ; selamat datang untuk mengujinya. Saya juga berharap semua orang mendukung VeVb Wulin Network.