vue中使用图片url直接下载图片

vue中使用图片url直接下载图片

复制代码
     // 下载图片
      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)
            this.download(url, name)
            // 用完释放URL对象
            URL.revokeObjectURL(url)
          })
        }
      },

      download(href, name) {
        let eleLink = document.createElement('a')
        eleLink.download = name
        eleLink.href = href
        eleLink.click()
        eleLink.remove()
      },

直接调用即可

复制代码
downloadByBlob('http://********/home/record/227/197/233/164/AEgAAhQ-QVKng2Fv.png','小小')
相关推荐
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
阿芯爱编程5 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试
烛阴6 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
拉不动的猪7 小时前
JQ常规面试题
前端·javascript·面试