纯js原生实现图片批量下载

前端纯js实现图片批量下载到本地

// 图片转base64
getImageBase64 (image) {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, image.width, image.height)
      // 获取图片后缀名
      const extension = image.src
        .substring(image.src.lastIndexOf('.') + 1)
        .toLowerCase()
      // 某些图片 url 可能没有后缀名，默认是 png
      return canvas.toDataURL('image/' + extension, 1)
}

// 主代码块
图片列表循环( item => {
	// 创建一个a标签
	  const link = document.createElement('a')
      link.setAttribute('download', item.url)
      const image = new Image()
      // 添加时间戳，防止浏览器缓存图片
      image.src = item.url+ '?timestamp=' + new Date().getTime()
      // 设置 crossOrigin 属性，解决图片跨域报错
      image.setAttribute('crossOrigin', 'Anonymous')
      image.onload = () => {
        link.href = this.getImageBase64(image)
        link.click()
      }
})