vue.js3: js下载图片的两种方式:url和canvas(vue@3.2.37)

<template>
<div>
  <img id="img" src="/static/image/dog.jpg" style="width:300px;" /><br/>
  <button @click="downImgByUrl">down by url</button>
  <button style="margin-left:10px;" @click="downImgByCanvas">down by canvas</button>
</div>
</template>

<script>
export default {
  name: "ImgDown",
  setup () {
      //得到图片的canvas,然后下载
      const downImgByCanvas = () => {
          let id="img";
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        //得到原始的宽高
        let sourceImage = document.getElementById(id);
        canvas.width = sourceImage.naturalWidth;
        canvas.height = sourceImage.naturalHeight;
        //保存图片到canvas
        ctx.drawImage(sourceImage, 0, 0);
        downJpgByCanvas(canvas);
      }
      
      //得到图片的url,然后下载
      const downImgByUrl = () => {
         let img = document.getElementById('img');
          downJpgByUrl(img.src);
      }

    //下载图片:通过canvas
    const downJpgByCanvas = (canvas) => {
      var oA = document.createElement("a");
      let time = timeFormat();
      oA.download = "img_"+time+'.jpg';// 设置下载的文件名，默认是'下载'
      oA.href = canvas.toDataURL("image/jpeg");
      document.body.appendChild(oA);
      oA.click();
      oA.remove(); // 下载之后把创建的元素删除
    }

    //下载图片:通过url
    const downJpgByUrl = (url) => {
      let time = timeFormat();
      var a = document.createElement('a');      // 创建一个a节点插入的document
      var event = new MouseEvent('click')          // 模拟鼠标click点击事件
      a.download = "img_"+time+'.jpg';                  // 设置a节点的download属性值
      a.href = url;                                     // 将图片的src赋值给a节点的href
      a.dispatchEvent(event)
      a.remove(); // 下载之后把创建的元素删除
    }

    //补0
    const add0 = (m) => {
      return m<10?'0'+m:m
    }
    //格式化时间
    const timeFormat = ()=>{
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth()+1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      let res = y+add0(m)+add0(d)+add0(h)+add0(mm)+add0(s);
      return res;
    }

      return {
        downImgByUrl,
        downImgByCanvas,
      }
  }
}
</script>

<style scoped>

</style>