استخدم اللوحة القماشية لتنفيذ وظيفة تنزيل الصور لحل مشكلات توافق المتصفح

مقدمة: يجب تنفيذ وظيفة تنزيل الصور في المشروع، أول ما يتبادر إلى الذهن هو استخدام سمة التنزيل الخاصة بالعلامة لتحقيق ذلك، ومع ذلك، عند الاختبار في متصفحات مختلفة، ستجد أن بعض المتصفحات غير صالحة وسيتم معاينة الصورة مباشرة بعد النقر عليها، لذا، اتصل بالإنترنت ووجدت طريقة أخرى لتنزيل الصور المتوافقة مع المتصفحات المختلفة، وهي استخدام اللوحة القماشية لمعالجة الصور وتنزيلها.

1. انقر فوق ربط الحدث في المشروع:

 <a href=# @click.prevent=downloadIamge(imgsrc, name)><span>{{name}}</span></a>

2. العملية في حدث النقر:

 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 = ' لا شيء' body.appendChild(a) a.click() body.removeChild(a) window.URL.revocObjectURL(a.href) } }) },

3.this.convertUrlToBase64(url) يستخدم قماش وtoDataURL لتحويل الصورة إلى تنسيق base64 وإعادتها

 ConvertUrlToBase64 (url) { return new Promise((الحل، الرفض) => { const img = new Image() img.crossOrigin = 'مجهول' img.src = url img.onload = function () { const Canvas = document.createElement ("قماش") ​​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، اكتب: 'image/' + ext، ext: ext } Resolve(base64) } }) }،

من بينها: img.crossOrigin = 'Anonymous' هي معالجة الصور عبر المجالات بواسطة الواجهة الأمامية؛

4.this.convertBase64UrlToBlob(base64) يحول ملف دفق الصورة base64 إلى ملف ثنائي كبير الحجم

 تحويلBase64UrlToBlob (base64) { const parts = base64.dataURL.split('base64,') const contentType = parts[0].split(':')[1] const Raw = window.atob(parts[1]) const RawLength = طول خام const uInt8Array = جديد Uint8Array(rawLength) لـ (let i = 0; i < RawLength i++) { uInt8Array[i] = Raw.charCodeAt(i) } إرجاع Blob جديد([uInt8Array], { type: contentType }) },

يتم استخدام 5.getBrowser() لتحديد المتصفح وحل مشكلات توافق المتصفح:

 استيراد { getBrowser } من '@/utils/utils'export وظيفة 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) { إرجاع "سفاري" }}

6. إذا كان متصفح IE أو Edge، فيمكنك استخدام window.navigator.msSaveBlob(blob, name) مباشرة لإكمال التنزيل؛

إخلاء المسؤولية: نظرًا للقيود الأمنية في نظام iOS، فإن الطريقة المذكورة أعلاه غير صالحة على نظام iOS؛

ما ورد أعلاه هو مشكلة تنزيل الصور وتوافق المتصفح المستخدم في مشروع التسجيل. إن نقاط المعرفة والمبادئ المتعلقة بـ base64 وblob ليست واضحة تمامًا بعد. يجب عليك دراستها عندما يكون لديك الوقت. الطريقة بأكملها فعالة في الاختبار الشخصي ؛ مرحبا بكم في اختباره، وردود الفعل. آمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.