คำนำ: จำเป็นต้องใช้ฟังก์ชันการดาวน์โหลดรูปภาพในโปรเจ็กต์ สิ่งแรกที่นึกถึงคือการใช้แอตทริบิวต์การดาวน์โหลดของแท็กเพื่อให้บรรลุผล อย่างไรก็ตาม เมื่อทดสอบภายใต้เบราว์เซอร์ที่แตกต่างกัน จะพบว่าเบราว์เซอร์บางตัว ไม่ถูกต้องและจะดูตัวอย่างรูปภาพโดยตรงหลังจากคลิก ดังนั้น ฉันพบวิธีอื่นในการดาวน์โหลดรูปภาพที่เข้ากันได้กับเบราว์เซอร์ที่แตกต่างกัน ซึ่งก็คือการใช้ Canvas เพื่อประมวลผลรูปภาพและดาวน์โหลด
1. คลิกการเชื่อมโยงเหตุการณ์ในโครงการ:
<a href=# @click.prevent=downloadIamge(imgsrc, name)><span>{{name}}</span></a>2. การดำเนินการในเหตุการณ์คลิก:
downloadIamge (imgsrc ชื่อ) { const url = imgsrc this.convertUrlToBase64(url).then((base64) => { const blob = this.convertBase64UrlToBlob(base64) if (getBrowser() === 'IE' || getBrowser( ) === 'Edge') { window.navigator.msSaveBlob(blob, name) } อื่น ๆ { 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.revoidObjectURL(a.href) } }) -3.this.convertUrlToBase64(url) ใช้ canvas และ toDataURL เพื่อแปลงรูปภาพเป็นรูปแบบ base64 และส่งคืน
ConvertUrlToBase64 (url) { ส่งคืนสัญญาใหม่ ((แก้ไข, ปฏิเสธ) => { const img = รูปภาพใหม่ () img.crossOrigin = 'ไม่ระบุชื่อ' 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 ('รูปภาพ /' + ต่อ) const base64 = { dataURL: dataURL พิมพ์: 'image/' + ext, ext: ext } แก้ไข (base64) } }) },หนึ่งในนั้นคือ img.crossOrigin = 'Anonymous' คือการประมวลผลภาพข้ามโดเมนโดยส่วนหน้า
4.this.convertBase64UrlToBlob(base64) แปลงไฟล์สตรีมภาพ base64 เป็นไฟล์ blob
ConvertBase64UrlToBlob (base64) { const parts = base64.dataURL.split('base64,') const contentType = parts[0].split(':')[1] const raw = window.atob (ส่วน [1]) const rawLength = raw.length const uInt8Array = new Uint8Array(rawLength) for (let i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } ส่งคืน Blob ใหม่ ([uInt8Array], { ประเภท: contentType }) },5.getBrowser() ใช้เพื่อระบุเบราว์เซอร์และแก้ไขปัญหาความเข้ากันได้ของเบราว์เซอร์:
นำเข้า { getBrowser } จาก '@/utils/utils'export ฟังก์ชั่น getBrowser () { const userAgent = navigator.userAgent if (userAgent.indexOf('OPR') > -1) { return 'Opera' } if (userAgent.indexOf( 'Firefox') > -1) { ส่งคืน 'FF' } ถ้า (userAgent.indexOf ('Trident') > -1) { ส่งคืน 'IE' } if (userAgent.indexOf('Edge') > -1) { return 'Edge' } if (userAgent.indexOf('Chrome') > -1) { return 'Chrome' } ถ้า (userAgent.indexOf('Safari' ) > -1) { กลับ 'ซาฟารี' }}6. หากเป็นเบราว์เซอร์ IE หรือ Edge คุณสามารถใช้ window.navigator.msSaveBlob(blob, name) ได้โดยตรงเพื่อทำการดาวน์โหลดให้เสร็จสิ้น
ข้อจำกัดความรับผิดชอบ: เนื่องจากข้อจำกัดด้านความปลอดภัยในระบบ iOS วิธีการข้างต้นจึงไม่ถูกต้องบน iOS
ข้างต้นคือปัญหาของการดาวน์โหลดรูปภาพและความเข้ากันได้ของเบราว์เซอร์ที่ใช้ในโปรเจ็กต์การบันทึก จุดความรู้และหลักการที่เกี่ยวข้องกับ base64 และ blob ยังไม่ชัดเจน คุณต้องศึกษามันเมื่อคุณมีเวลา วิธีการทั้งหมดมีประสิทธิภาพในการทดสอบส่วนตัว ; ยินดีต้อนรับสู่การทดสอบและข้อเสนอแนะ ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network