Vue——url下载图片文件（cavans）

最新推荐文章于 2024-08-06 16:24:55 发布

Juliet_xmj

最新推荐文章于 2024-08-06 16:24:55 发布

阅读量1.6k

点赞数 2

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/Juliet_xmj/article/details/118811094

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue——url下载图片文件（cavans）

记录项目中下载图片方式，这个方法不会在当前页打开而且兼容

1.方法

// 下载图片
  phoneDown (imgsrc, name) {
    //下载图片地址和图片名
    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 = name || 'photo' // 设置图片名称
      a.href = url // 将生成的URL设置为a.href属性
      a.dispatchEvent(event) // 触发a的单击事件
    }
    image.src = imgsrc
  }