js实现点击图片就下载图片，适用于Google，Firefox浏览器

最新推荐文章于 2026-07-20 15:25:04 发布

原创最新推荐文章于 2026-07-20 15:25:04 发布 · 621 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

6 篇文章 0 人学习

JS相关

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何利用JavaScript在Google和Firefox浏览器中实现点击图片即可下载的功能，主要涉及Vue.js和JavaScript的相关技术。

    // 图片下载
    /**
     * url: 图片的路径,必需参数
     * name：图片的名称,非必需参数
     */
    downloadByBlob(url, name) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob)
          this.download(url, name)
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },
    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },