vue 项目 下载图片地址 和图片名称

电玩女神 2022-09-11 11:15 328阅读 0赞

vue 项目 下载图片地址 和图片名称

引入：import { downloadImage } from '@/utils/downloadImg'
使用：downloadImage(imgurl, imgname)

  1. export const downloadImage = (imgsrc, name) => {  // 下载图片地址和图片名
  2.   var image = new Image()
  3.   image.setAttribute('crossOrigin', 'anonymous')
  4.   image.onload = function() { 
  5.     var canvas = document.createElement('canvas')
  6.     canvas.width = image.width
  7.     canvas.height = image.height
  8.     var context = canvas.getContext('2d')
  9.     context.drawImage(image, 0, 0, image.width, image.height)
  10.     var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
  12.     var a = document.createElement('a') // 生成一个a元素
  13.     var event = new MouseEvent('click') // 创建一个单击事件
  14.     a.download = name || 'photo' // 设置图片名称
  15.     a.href = url // 将生成的URL设置为a.href属性
  16.     a.dispatchEvent(event) // 触发a的单击事件
  17.   }
  18.   image.src = imgsrc
  19. }

发表评论

表情：
评论列表 （有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读