laravel+vue+vuetify(下载图片到本地)

vue.js如何根据后台返回来的图片url进行图片下载

 

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);

 

                }

            }