vue怎么实现根据图片url进行图片下载

这篇“vue怎么实现根据图片url进行图片下载”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现根据图片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

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

以上就是关于“vue怎么实现根据图片url进行图片下载”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。