前端下载图片的N种方法
前幾天一個簡單的下載圖片的需求折騰了我后端大佬好幾天，最終還是需要前端來搞，開始說不行的筆者最后又行了，所以趁著這個機會來總結一下下載圖片到底有多少種方法。
先起個服務
使用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.讀取圖片文件，以流的形式返回
瀏覽器訪問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字符串
- 情況6.上述幾種情況的post請求方式
一.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.widthcanvas.height = img.heightlet 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 = keyinput.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。
總結
以上是生活随笔為你收集整理的前端下载图片的N种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VS 官方历史版本下载
- 下一篇： Legacy与UEFI