vue下载图片常见问题，解决vue中下载同源图片、跨域图片，以及打包下载多个跨域图片

在网上查了很多资料，发现很多都是html+js，jquery实现图片下载的，于是整理了一份在vue中下载的方式，总结如下：

一、使用axios下载同源图片

原理：创建一个a标签并隐藏掉，将axios返回的图片路径赋值给href，a标签的dowmload属性不设置时浏览器会直接打开href路径，设置了之后会强制将文件下载下来，我们就用这一方式下载图片，加载完之后再将a标签移除，此方式只针对同源图片。

<el-button type="primary" @click="handleDownload(this.imgurl,'photo.jpg')">下载同源图片</el-button>

js代码：

import axios from 'common/js/axios'  // 引入配置的axios


// imgUrl为图片路径，fileName为文件名
handleDownload(imgUrl, fileName){
  axios
  .get(imgUrl, { responseType: 'arraybuffer' })
  .then((res) => {
    const blob = new Blob([res.data])
    const blobUrl = window.URL.createObjectURL(blob)
    // 创建a标签并隐藏 设置标签属性为download时会强制下载
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = blobUrl
    a.setAttribute('download', fileName)
    // 清除a标签
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(blobUrl)
  })
}

二、创建canvas下载跨域图片

原理：当图片域名跟当前域名不同时，创建一个canvas，把图片转成base64的格式，再赋值给a标签，就可以下载了。

<el-button type="primary" @click="handleDownload(this.imgurl,'photo.jpg')">下载跨域图片</el-button>

js代码：

// 下载点击事件
handleDownload(this.imgUrl, 'photo.jpg').then(() => {
  this.$message.success('成功下载1张图片！')
})


// 下载图片
downloadImg(imgsrc, fileName) {
  let image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function() {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
    let a = document.createElement('a') // 生成一个a元素
    let event = new MouseEvent('click') // 创建一个单击事件
    a.download = fileName || 'photo' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = imgsrc
  return Promise.resolve()
}

三、将多个图片打包成zip，下载下来

用到的插件：

npm install jszip

npm install file-saver

<el-button type="primary" @click="handleDownloadAll(this.imgList)">下载所有图片</el-button>

js代码： 

    // 引入插件
    import JSZip from 'jszip'
    import { saveAs } from 'file-saver'


    // 批量下载图片
    handleDownloadAll(imgList) {
      const that = this
      var imgBase64 = []
      var imageSuffix = [] // 图片后缀
      var zip = new JSZip()
      var img = zip.folder('文件夹名')
      for (var i = 0; i < imgList.length; i++) {
        // 获取每个图片的后缀
        var suffix = imgList[i].substring(imgList[i].lastIndexOf('.'))
        imageSuffix.push(suffix)

        this.getBase64(imgList[i])
          .then(base64 => {
            imgBase64.push(base64.substring(22))
          }, err => {
            console.log(err) // 打印异常信息
          })
      }

      function tt () {
        setTimeout(function () {
          if (imgList.length === imgBase64.length) {
            for (var i = 0; i < imgList.length; i++) {
              // 设置文件名
              img.file(i + imageSuffix[i], imgBase64[i], { base64: true })
            }
            zip.generateAsync({ type: 'blob' }).then(function (content) {
              // see FileSaver.js
              saveAs(content, '压缩包名.zip')
              that.$message.success(`成功下载${imgList.length}张图片！`)
            })
          } else {
            tt()
          }
        }, 100)
      }
      tt()
    },


    getBase64 (img) {
      // width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
      function getBase64Image (img, width, height) {
        var canvas = document.createElement('canvas')
        canvas.width = width || img.width
        canvas.height = height || img.height

        var ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
        var dataURL = canvas.toDataURL()
        return dataURL
      }
      return new Promise((resolve) => {
        var image = new Image()
        image.crossOrigin = 'Anonymous'
        image.src = img
        if (img) {
          image.onload = function () {
            // 读取图片之后的操作
            resolve(getBase64Image(image))
          }
        }
      })
    },