一、转换base64编码

  1. // 下载图标点击事件
  2. downloadIcon() {
  3. let downloadUrl =
  4. 'https://xxx.com' +
  5. this.gameInfoData.gameIcon.replace('_thumb', '')
  6. this.downloadImg(downloadUrl, this.gameInfoData.gameName + '-icon')
  7. },
  8. // 功能代码
  9. downloadImg(imgsrc, name) {
  10. var image = new Image()
  11. // 解决跨域 Canvas 污染问题
  12. image.setAttribute('crossOrigin', 'anonymous')
  13. image.onload = function() {
  14. var canvas = document.createElement('canvas')
  15. canvas.width = image.width
  16. canvas.height = image.height
  17. var context = canvas.getContext('2d')
  18. context.drawImage(image, 0, 0, image.width, image.height)
  19. var url = canvas.toDataURL() //得到图片的base64编码数据
  20. var a = document.createElement('a') // 生成一个a元素
  21. var event = new MouseEvent('click') // 创建一个单击事件
  22. a.download = name || 'photo' // 设置图片名称
  23. a.href = url // 将生成的URL设置为a.href属性
  24. a.dispatchEvent(event) // 触发a的单击事件
  25. }
  26. image.src = imgsrc
  27. }

参考:https://blog.csdn.net/z9061/article/details/84882353

二、下载文件

参考:https://segmentfault.com/a/1190000020540788

Vue下载指定url图片 - 图1 插个眼,日后再去摸索摸索这方面的功能