这篇文章主要介绍“vue.js怎么根据图片url进行图片下载”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue.js怎么根据图片url进行图片下载”文章能帮助大家解决问题。
这是后台返回来的json数据（防止泄露重要信息IP地址打码了）：
我在html里的引用是这样的：
计算
安全
数据库
网络和加速
企业服务
<a @click="downCom" >
下载执照
<i class="icon-down"></i>
</a>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进行图片下载”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4582201/blog/4378118
