前端下载图片的N种方法

更新日期: 2021-08-02阅读: 2.5k标签: 图片

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

先起个服务

使用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
原文链接:https://www.cnblogs.com/wanglinmantan/archive/2021/08/02/15088419.html


链接: https://fly63.com/article/detial/10597

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!