最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，本文就介绍了vue.js根据图片url进行图片下载，感兴趣的可以了解一下
最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，后台返回来的是一串图片url，试了很多种方法，发现点击下载时出来的效果，都是跳到一个新的图片网页，后来经过一番琢磨，终于解决了这个问题：
这是后台返回来的json数据（防止泄露重要信息IP地址打码了）：
我在html里的引用是这样的：
下载执照
vue.js方法里的下载图片方法：
downCom() { let that = this; this.$http.files().then(res => { let hreLocal=""; hreLocal = res.data.data.url; this.downloadByBlob(hreLocal,"pic") }); },
下面这个方法，可以直接拿去用，直接把你的图片url传给这个方法，就可以实现vue.js来下载图片了。
downloadByBlob(url,name) { let image = new Image() image.setAttribute('crossOrigin', 'anonymous') 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) => { let url = URL.createObjectURL(blob) download(url,name) // 用完释放URL对象 URL.revokeObjectURL(url) }) } },
调用的download（url,name）方法：
function download(href, name) { let eleLink = document.createElement('a') eleLink.download = name eleLink.href = href eleLink.click() eleLink.remove() }
完成上面的代码后，即可实现图片下载，而不是图片浏览啦。
最后成功实现点击即可下载图片，效果图如下：
以上就是vue.js根据图片url进行图片下载的详细内容，更多请关注本站其它相关文章！
