laravel+vue+vuetify(下載圖片到本地)


 
downloadByBlob(url,name) {
                let image = new Image()
                image.setAttribute('crossOrigin', 'anonymous')  //處理跨域 可以在瀏覽器安裝cors插件
                image.src = url
                image.onload = () => {
                    let canvas = document.createElement('canvas')
                    canvas.width = image.width
                    canvas.height = image.height
                    let ctx = canvas.getContext('2d')
                    ctx.drawImage(image, 0, 0, image.width, image.height)
                    canvas.toBlob((blob) => {    //圖片的blob對象
                        let url = URL.createObjectURL(blob)  //將blob對象轉為url
                        this.download(url,name)
                        // 用完釋放URL對象
                        URL.revokeObjectURL(url)
                    })
                }
            },
            download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name  //下載的文件名
            eleLink.href = href   //文件流
            eleLink.click()  //單擊下載
            eleLink.remove()  //移除
            },
    //remoteSelected選中的圖片的數據(后台返回的數據),循環下載
           async writeImage(remoteSelected){
                this.loading = true;
                for(var key in remoteSelected) {
       let url = remoteSelected[key]['url']
       let    name = remoteSelected[key]['name']
                    await this.downloadByBlob(url,name);

 

                }
            }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM