点击img，直接下载图片

 <a href="xxx.jpg" download="图片.jpg">图片</a>

若该图片是跨域，download属性会失效

所以为了解决跨域图片的下载，我们使用js下载图片

1.将图片转化为base64，再下载

downloadDataUrlImage () {
      let img = new Image()
      img.setAttribute('crossOrigin', 'Anonymous')
      img.onload = function () {
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img, 0, 0, img.width, img.height)
        let url = canvas.toDataURL('images/png')
        console.log(url)
        let a = document.createElement('a')
        let event = new MouseEvent('click')
        a.href = url
        a.download = 'default.jpg'
        a.dispatchEvent(event)
      }
      img.src = 'xxxx.jpg' + '?v=' + Date.now()
    }

2.将图片转化为blob，再下载

 downloadBlobImage () {
      let img = new Image()
      img.setAttribute('crossOrigin', 'Anonymous')
      img.onload = function () {
        let canvas = document.createElement('canvas')
        let context = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        context.drawImage(img, 0, 0, img.width, img.height)
        canvas.toBlob(blob => {
          let url = URL.createObjectURL(blob)
          let a = document.createElement('a')
          let event = new MouseEvent('click')
          a.href = url
          a.download = 'default.jpg'
          a.dispatchEvent(event)
        })
      }
      img.src = 'xxxxx.jpg' + '?v=' + Date.now()
    }