最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，后台返回来的是一串图片url，试了很多种方法，发现点击下载时出来的效果都是跳着到一个新的图片网页，后来经过一番琢磨，终于解决了这个问题：

 

这是后台返回来的json数据（防止泄露重要信息IP地址打码了）：

 

 

下面这个方法，可以直接拿去用，直接把你的图片url传给这个方法，就可以实现vue.js来下载图片了。

 1  downloadByBlob(url) {
 2     let image = new Image()
 3     image.setAttribute('crossOrigin', 'anonymous')
 4     image.src = url
 5     image.onload = () => {
 6       let canvas = document.createElement('canvas')
 7       canvas.width = image.width
 8       canvas.height = image.height
 9       let ctx = canvas.getContext('2d')
10       ctx.drawImage(image, 0, 0, image.width, image.height)
11       canvas.toBlob((blob) => {
12         let url = URL.createObjectURL(blob)
13         download(url)
14         // 用完释放URL对象
15         URL.revokeObjectURL(url)
16       })
17     }
18   },

最后成功实现点击即可下载图片，效果图如下：

 

版权声明：本文为zhujiqian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhujiqian/p/11475467.html