Vue和JS前端网页下载保存图片到本地电脑中

复制代码
//保存图片
clickSaveImage(url) {
  let image = new Image();
  // 解决跨域 canvas污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.src = url + '?time=' + new Date().valueOf() // 加时间戳
  this.$nextTick(() => {
    image.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.download = '图片名称'
        a.href = url
        a.click()
        a.remove()
        URL.revokeObjectURL(url)
      })
    }
  })
},
复制代码

 

posted @   江北小乔  阅读(1162)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
历史上的今天:
2017-03-28 安卓中常用的工具类集合
点击右上角即可分享
微信分享提示