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','小小')
相关推荐
小约翰仓鼠5 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in5 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴5 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
你的人类朋友6 小时前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈6 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg36786 小时前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_527550406 小时前
初级程序员入门指南
javascript·python·算法
HelloWord~6 小时前
SpringSecurity+vue通用权限系统
vue.js·spring boot
钡铼技术ARM工业边缘计算机6 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
高山我梦口香糖7 小时前
[electron]预脚本不显示内联script
前端·javascript·electron