download下载图片

<template>
  <div class="app-container">
    <h2>图片下载到本地</h2>
    <div>
      <img :src="imgUrl" alt="" srcset="">
    </div>
    <el-button type="primary" @click="downs()">下载</el-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imgUrl: 'https://img2.baidu.com/it/u=2937803703,3095540904&fm=26&fmt=auto&gp=0.jpg'
    }
  },
  methods:{
    downloadIamge(imgsrc, name){
      var image = new Image()
      image.setAttribute("crossOrigin","anonymous")
      image.onload = function(){
        var canvas = document.createElement("canvas")
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext("2d")
        context.drawImage(image,0,0,image.width,image.height)
        var url = canvas.toDataURL("image/png")
        var a = document.createElement("a")
        var event = new MouseEvent("click")
        a.download = name || "photo"
        a.href = url
        a.dispatchEvent(event)
      }
      image.src = imgsrc
    },
    downs(){
      this.downloadIamge(this.imgUrl,'这是图片')
    }
  }
}
</script>

<style>

</style>