前端图片下载的实现

2019/10/23 16:16
阅读数 15

前端图片下载分为两大类:

一是服务端配合实现(即下载后台服务提供的资源);

二是纯前端下载;

1.服务端配合实现

这种情况对于前端开发来说非常简单,只需呀一个a标签,如:

 

<a href='/api/download' >下载图片</a>

当直接访问的某个文件时,如果该文件是二进制等浏览器无法解析的文件,浏览器才会下载该文件,

但如果浏览器可以自己解析该文件,则它会打开该文件并以自己的方式呈现出来,而不会下载,

此时就需要设置消息响应头,告诉浏览器该文件需要下载而不是简单的打开。 

这时候后台要提供一个get请求的服务,并设置消息响应头,告诉浏览器该文件需要下载。以node为例:

app.get('/api/download/', (req, res, next) => {//以文件流的形式下载文件
    var filePath = path.join(__dirname, '../src/images/erwei.jpg');
    var stats = fs.statSync(filePath);
    res.set({
        'Content-Type': 'application/octet-stream', //告诉浏览器这是一个二进制文件
        'Content-Disposition': 'attachment; filename=111', //告诉浏览器这是一个需要下载的文件
        'Content-Length': stats.size  //文件大小
    });
    fs.createReadStream(filePath).pipe(res);
});

2.纯前端下载

这其中又分为两种情况:一是下载同源图片(如同项目文件夹中的图片);二是 跨域网站的静态资源(如自己公司的CDN的静态资源)

a.下载同源图片

这种情况很简单 利用a标签的 downlaod 就可以实现,例

<a href=‘../img/test.png’ download="img" >下载图片</a>

b.下载跨域网站的图片

借助canvas,例

// 调用方式
// 参数一: src
// 参数二: 图片名称,可选
export const downloadImage = (src: string, name: string) => {
    const image = new Image();
    // 解决跨域 canvas 污染问题
    image.setAttribute('crossOrigin','anonymous');
    image.onload = function(){
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const context = canvas.getContext('2d');
      context.drawImage(image,0,0,image.width,image.height);
      const url = canvas.toDataURL('image/png');
      // 生成一个 a 标签
      const a = document.createElement('a');
      // 创建一个点击事件
      const event = new MouseEvent('click');
      // 将 a 的 download 属性设置为我们想要下载的图片的名称,若 name 不存在则使用'图片'作为默认名称
      a.download = name || '图片';
      // 将生成的 URL 设置为 a.href 属性
      a.href = url;
      // 触发 a 的点击事件
      a.dispatchEvent(event);
    };
    image.src = src
}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部