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

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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进行图片下载的文章就介绍到这了,更多相关vue.js图片url进行图片下载内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js根据图片url进行图片下载全部内容,希望文章能够帮你解决vue.js根据图片url进行图片下载所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: