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

}

}