乐趣区

关于javascript:前端下载图片的N种方法

jiezi

前几天一个简略的下载图片的需要折腾了我后端大佬好几天，最终还是须要前端来搞，开始说不行的笔者最初又行了，所以趁着这个机会来总结一下下载图片到底有多少种办法。

先起个服务

应用 expressjs 起个简略的后端服务，先装置：

mkdir demo
cd demo
npm init
npm install express --save// v4.17.1

而后创立一个 app.js 文件，输出：

const express = require('express')
const app = express()
app.get('/', (req, res) => {res.send('hello world')
})
app.listen(3000, () => {console.log('服务启动实现')
})

而后在命令行输出：node app.js，拜访 http://localhost:3000/，页面显示hello world 即示意服务启动胜利。

接下来别离模仿几种状况：

  • 状况 1. 动态图片

创立一个 public 文件夹，轻易拷贝一张图片比方 test.jpg 进去，而后增加以下代码：

// ...
app.use(express.static('./public'))
// app.listen...

浏览器拜访 http://localhost:3000/test.jpg 即可看到该图片。

  • 状况 2. 读取图片文件，以流的模式返回
app.get('/getFileStream', (req, res) => {
    const fileName = req.query.name
    const stream = fs.createReadStream(path.resolve('./public/' + fileName))
    stream.pipe(res)
})

浏览器拜访 http://localhost:3000/getFileStream?name=test.jpg 即可拜访到该图片。

  • 状况 3. 读取图片文件返回流并增加 Content-Disposition 响应头

Content-Disposition响应头是 MIME 协定的扩大，用来通知浏览器如何解决服务器发送的文件，有三种取值：

Content-Disposition: inline// 如果浏览器能间接关上该文件会间接关上，否则触发保留
Content-Disposition: attachment// 通知浏览器以附件的模式发送，会间接触发保留，会以接口的名字作为默认的文件名
Content-Disposition: attachment; filename="xxx.jpg"// 通知浏览器以附件的模式发送，会间接触发保留，filename 的值作为默认的文件名
app.get('/getAttachmentFileStream', (req, res) => {
    const fileName = req.query.name
    // attachment 办法实际上设置了两个响应头的值：/*
        Content-Disposition: attachment; filename="【文件名】"
        Content-Type:【文件 MIME 类型】*/
    res.attachment(fileName); 
    const stream = fs.createReadStream(path.resolve('./public/' + fileName))
    stream.pipe(res)
})
  • 状况 4. 动静生成图片返回流

咱们以生成二维码为例，应用 qr-image 这个库来创立二维码，增加以下代码：

const qr = require('qr-image')
app.get('/createQrCode', (req, res) => {
    // 生成二维码只读流
    const data = qr.image(req.query.text, {type: 'png'});
    data.pipe(res)
})
  • 状况 5. 返回 base64 字符串
app.get('/createBase64QrCode', (req, res) => {
    const data = qr.image(req.query.text, {type: 'png'});
    const chunks = []
    let size = 0
    data.on('data', (chunk) => {chunks.push(chunk)
        size += chunk.length
    })
    data.on('end', () => {const data = Buffer.concat(chunks, size)
        const base64 = `data:image/png;base64,` + data.toString('base64')
        res.send(base64)
    })
})
  • 状况 6. 上述几种状况的 post 申请形式
// 解析 json 类型的申请体
app.use(express.json())
// 解析 urlencoded 类型的申请体
app.use(express.urlencoded())
app.post('/getFileStream', (req, res) => {
    const fileName = req.body.name
    const stream = fs.createReadStream(path.resolve('./public/' + fileName))
    stream.pipe(res)
})
app.post('/getAttachmentFileStream', (req, res) => {
    const fileName = req.body.name
    res.attachment(fileName);
    const stream = fs.createReadStream(path.resolve('./public/' + fileName))
    stream.pipe(res)
})
app.post('/createQrCode', (req, res) => {
    const data = qr.image(req.body.text, {type: 'png'});
    data.pipe(res)
})

一.a 标签下载

a标签 html5 版本新增了 download 属性，用来通知浏览器下载该url，而不是导航到它，能够带属性值，用来作为保留文件时的文件名，只管说有同源限度，然而我理论测试时非同源的也是能够下载的。

对于没有设置 Content-Disposition 响应头或者设置为 inline 的图片来说，因为图片对于浏览器来说是属于能关上的文件，所以并不会触发下载，而是间接关上，浏览器不能预览的文件无论有没有 Content-Disposition 头都会触发保留：

<!-- 间接关上 -->
<a href="/test.jpg" download="test.jpg" target="_blank">jpg 动态资源 </a>
<!-- 触发保留 -->
<a href="/test.zip" download="test.pdf" target="_blank">zip 动态资源 </a>
<!-- 触发保留 -->
<a href="https://www.7-zip.org/a/7z1900-x64.exe" download="test.zip" target="_blank"> 三方 exe 动态资源 </a>
<!-- 间接关上 -->
<a href="/createQrCode?text=http://lxqnsys.com/" download target="_blank"> 二维码流 </a>
<!-- 间接关上 -->
<a href="/getFileStream?name=test.jpg" download target="_blank">jpg 流 </a>
<!-- 触发保留 -->
<a href="/getFileStream?name=test.zip" download target="_blank">zip 流 </a>
<!-- 触发保留 -->
<a href="/getAttachmentFileStream?name=test.jpg" download target="_blank"> 附件 jpg 流 </a>
<!-- 触发保留 -->
<a href="/getAttachmentFileStream?name=test.zip" download target="_blank"> 附件 zip 流 </a>

所以说如果想用 a 标签下载图片，那么要让后端加上 Content-Disposition 响应头，另外也必须以流的模式返回，跨域图片合乎这个要求也能够下载，即便响应没有容许跨域的头，然而动态图片即便增加了这个头也是间接关上：

// 经测试，浏览器依然间接关上图片
app.use(express.static('./public', {setHeaders(res) {res.attachment()
    }
}))

和 a 标签形式相似的还能够应用location.href：

location.href = '/test.jpg'
location.href = '/test.zip'

行为和 a 标签完全一致。

这两种形式的毛病也很显著，一是不反对 post 等其余形式的申请，二是须要后端反对。

二.base64格局下载

a标签反对 data: 协定的 URL，利用这个能够让后端返回base64 格局的字符串，而后应用 download 属性进行下载：

<template>
    <a :href="base64Img" download target="_blank">base64 字符串 </a>
</template>
<script>
import axios from 'axios'
export default {data () {
    return {base64Img: ''}
  },
  async created () {let { data} = await axios.get('/createBase64QrCode?text=http://lxqnsys.com/')
    this.base64Img = data
  }
}
</script>

这个形式就轻易 get 还是 post 申请了，毛病是 base64 字符串可能会十分大，传输慢以及节约流量，另外当然也得后端反对，须要同域或容许跨域。

三.blob格局下载

还是 a 标签，它还反对 blob: 协定的 URL，利用这个能够把响应类型设置为blob，而后和base64 一样扔给 a 标签：

<template>
    <a :href="blobData" download target="_blank">blob</a>
</template>
<script>
import axios from 'axios'
export default {data () {
    return {
      blobData: null,
      blobDataName: ''
    }
  },
  async created () {let { data} = await axios.get('/test.jpg', {responseType: 'blob'})
    const blobData = URL.createObjectURL(data)
    this.blobData = blobData
  }
}
</script>

这个形式须要和上述几个须要通过 ajax 申请的一样，都须要后端可控，即图片同域或反对跨域。

四. 应用 canvas 下载

这个办法其实和办法二和办法三是相似的，只是相当于把图片申请形式换了一下：

<template>
    <a :href="canvasBase64Img" download target="_blank">canvas base64 字符串 </a>
    <a :href="canvasBlobImg" download target="_blank">canvas blob</a>
</template>

<script>
    export default {data () {
            return {
                canvasBase64Img: '',
                canvasBlobImg: null
            }
        },
        created () {const img = new Image()
            // 跨域图片须要增加这个属性，否则画布被净化了无奈导出图片
            img.setAttribute('crossOrigin', 'anonymous')
            img.onload = () => {let canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                let ctx = canvas.getContext('2d')
                // 图片绘制到 canvas 里
                ctx.drawImage(img, 0, 0, img.width, img.height)
                // 1.data: 协定
                let data = canvas.toDataURL()
                this.canvasBase64Img = data
                // 2.blob: 协定
                canvas.toBlob((blob) => {const blobData = URL.createObjectURL(blob)
                    this.canvasBlobImg = blobData
                })
            }
            img.src = '/createQrCode?text=http://lxqnsys.com/'
        }
    }
</script>

img标签是能够跨域的，然而跨域的图片绘制到 canvas 里后无奈导出，浏览器会报错，能够给 img 增加 crossOrigin 属性，然而，如果图片没有容许跨域的头加了也没用。

五. 表单模式下载

对于 post 申请形式下载图片的话，除了应用上述的办法二和办法三之外，还能够应用 form 表单：

<template>
    <el-button type="primary" @click="formType">from 表单下载 </el-button>
  </div>
</template>

<script>
export default {
  methods: {formType () {
      // 创立一个暗藏的表单
      const form = document.createElement('form')
      form.style.display = 'none'
      form.action = '/getAttachmentFileStream'
      // 发送 post 申请
      form.method = 'post'
      form.target = '_blank'
      document.body.appendChild(form)
      const params = {name: 'test.jpg'}
      // 创立 input 来传递参数
      for (let key in params) {let input = document.createElement('input')
        input.type = 'hidden'
        input.name = key
        input.value = params[key]
        form.appendChild(input)
      }
      form.submit()
      form.remove()}
  }
}
</script>

应用该形式，图片流的响应头须要设置Content-Disposition，否则浏览器也是间接关上图片，有该响应头的话跨域图片也能够下载，即便图片不容许跨域。

六.ifrmae下载

document.execCommand有一个 SaveAs 命令，能够触发浏览器的另存为行为，利用这个能够把图片加载到 iframe 里，而后通过 iframe 的document来触发该命令：

<template>
    <el-button type="primary" @click="iframeType">iframe 下载 </el-button>
</template>

<script>
    export default {
        methods: {iframeType () {const iframe = document.createElement('iframe')
                iframe.style.display = 'none'
                iframe.onload = () => {iframe.contentWindow.document.execCommand('SaveAs')
                    document.body.removeChild(iframe)
                }
                iframe.src = '/createQrCode?text=http://lxqnsys.com/'
                document.body.appendChild(iframe)
            }
        }
    }
</script>

图片必须要是同源的，这种形式理解一下就行，因为它只在 IE 里被反对。

小结

本文简略剖析了一下前端下载图片的各种形式，各位能够依据理论需要进行抉择，除了最初一种办法，其余办法均未在 IE 上测试，有须要的能够自行测试。

demo代码在 https://github.com/wanglin2/download-image-demo。

退出移动版