js下载图片，支持vue

       //绑定点击事件
imgbase(url) {
    //调用方法（）
      this.rlToBlobAndDownload(url)//url传入图片路径
    },
    urlToBlobAndDownload(url) {
      //实例化一个img对象
      const img = new Image()
      //设置img的图片路径
      img.src = url
      //设置跨域解决
      img.setAttribute('crossOrigin', 'Anonymous')
      //img加载完后处理
      img.onload = function () {
        //创建一个canvas对象
        const canvas = document.createElement('canvas')
        //把图片的宽度设为canves的宽度
        canvas.width = img.width
        //把图片的高度设为canves的高度
        canvas.height = img.height
        //创建一个2d画布
        const ctx = canvas.getContext('2d')
        // 将img中的内容画到画布上
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        // 将画布内容转换为Blob
        canvas.toBlob((blob) => {
          // blob转为同源url
          let blobUrl = window.URL.createObjectURL(blob)
          // 创建a链接
          const a = document.createElement('a')
          a.href = blobUrl
          a.download = ''
          // 触发a链接点击事件，浏览器开始下载文件
          a.click()
        })
      }
    },

html部分

  <button
            @click="
              imgbase(
                'https://p2.itc.cn/q_70/images03/20210815/f6d8952ae0b644e991eccd09a2d020c9.jpeg'
              )
            "
          >
            下载
          </button>