Preface: The image download function needs to be implemented in the project. The first thing that comes to mind is to use the download attribute of the a tag to achieve it. However, when testing under different browsers, it will be found that some browsers are invalid and will directly preview the image after clicking. Therefore, go online. I found another method to download images that is compatible with different browsers, which is to use canvas to process images and download them;
1. Click event binding in the project:
<a href=# @click.prevent=downloadIamge(imgsrc, name)><span>{{name}}</span></a>2. Operation in click event:
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 = ' none' body.appendChild(a) a.click() body.removeChild(a) window.URL.revokeObjectURL(a.href) } }) },3.this.convertUrlToBase64(url) uses canvas and toDataURL to convert the image into base64 format and return it
convertUrlToBase64 (url) { return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = 'Anonymous' 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, type: 'image/' + ext, ext: ext } resolve(base64) } }) },Among them: img.crossOrigin = 'Anonymous' is the cross-domain processing of images by the front end;
4.this.convertBase64UrlToBlob(base64) converts the image base64 stream file into a blob file
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) for (let i = 0; i < rawLength; i++) { uInt8Array[i] = raw.charCodeAt(i) } return new Blob([uInt8Array], { type: contentType }) },5.getBrowser() is used to determine the browser and solve browser compatibility issues:
import { getBrowser } from '@/utils/utils'export function 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) { return 'Safari' }}6. If it is IE or Edge browser, you can directly use window.navigator.msSaveBlob(blob, name) to complete the download;
Disclaimer: Due to security restrictions in the iOS system, the above method is invalid on iOS;
The above is the problem of downloading images and browser compatibility used in the recording project. The knowledge points and principles involved in base64 and blob are not very clear yet. You must study it when you have time. The whole method is effective in personal testing; welcome to test it. , and feedback. I also hope that everyone will support VeVb Wulin Network.