vue.js根如何据图片url进行图片下载

本篇内容介绍了“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进行图片下载”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！