js实现图片下载

目录

1. 在新窗口打开图片，右键另存为

2. 同源下载图片

3. 不同源下载图片

---

1. 在新窗口打开图片，右键另存为

<img src="./images/123.png" alt="" width="200" height="200">
    <button>点击下载</button>
    <script>
        const img = document.querySelector('img')
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            let url = img.src
            // 新窗口打开
            // window.location.href = url  // 只会在当前页打开，相当于替换
            window.open(url)  // 在新页面打开
        })
    </script>

2. 同源下载图片

非同源策略就是当使用ajax请求时协议、域名、端口号中有一项不相同时出现的情况

非同源策略会产生跨域请求

1. 要不前端配置proxy请求代理
2. jsonp
3. 后端做配置，放权限

而同源则是协议、域名、端口号都相同

这种跟第一个是一样的，但是不能弹出新页面展示图片

<img src="./images/123.png" alt="" width="200" height="200">
    <button>点击下载</button>
    <script>
        const img = document.querySelector('img')
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            // 首先创建一个a元素
            let a = document.createElement('a')
            // 让a元素的href地址为图片地址
            a.href = img.src
            // 设置图片名
            a.download = 'pic'
            // 自动触发点击
            a.click()
        })
    </script>

如果想点击直接下载，需要把图片导入

<template>
  <div id="app">
    <img :src="img" alt="" />
    <button @click="download">点击下载</button>
  </div>
</template>

<script>
import img from '@/assets/logo.png'

export default {
  name: 'app',
  data() {
    return {
      // 图片地址
      img,
    }
  },
  methods: {
    download() {
      let a = document.createElement('a')
      a.href = this.img
      a.download = 'pic'
      a.click()
    },
  },
}
</script>

3. 不同源下载图片

• 直接粘贴就行，用的不多，有兴趣可以研究研究

<img src="https://img1.baidu.com/it/u=1112636550,1561836273&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669568400&t=a9198393d4bafd6434583994737ec992"
        alt="" width="200" height="200" class="downImageBtn">
    <button>点击下载</button>
    <script>
        document.querySelector('button').addEventListener('click', function () {
            downloadIamge('.downImageBtn', '图片的名称')
        })
        function downloadIamge(selector, name) {
            var image = new Image()
            // 解决跨域 Canvas 污染问题
            // crossorigin 是HTML5中新增的<img>标签属性
            //　crossorigin属性有两个值可选：
            //anonymous:如果使用这个值的话就会在请求中的header中的带上origin属性，但请求不会带上cookie和其他的一些认证信息。
            //use-credentials:这个同时会在跨域请求中带上cookie和其他的一些认证信息。在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。可以通过server的配置文件来开启这个属性：server开启Access-Control-Allow-Credentials
            image.setAttribute('crossOrigin', 'anonymous')
            image.onload = function () {
                var canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height

                var context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                var url = canvas.toDataURL('image/png')
                // 生成一个a元素
                var a = document.createElement('a')
                // 创建一个单击事件
                var event = new MouseEvent('click')

                // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
                a.download = name || '下载图片名称'
                // 将生成的URL设置为a.href属性
                a.href = url

                // 触发a的单击事件
                a.dispatchEvent(event);
            }
            image.src = document.querySelector(selector).getAttribute('src')
        }
    </script>