前端下载 图片 总结

前端下载图片 分为两大类：一是服务端配合实现（即下载后台服务提供的资源）； 二是 纯前端下载

1、服务端配合实现

这种情况 对于前端开发非常简单，只需要一个a标签，如：

下载图片

当直接访问的某个文件时，如果该文件是二进制等浏览器无法解析的文件，浏览器才会下载该文件，但如果浏览器可以自己解析该文件，则它会打开该文件并以自己的方式呈现出来，而不会下载，此时就需要设置消息响应头，告诉浏览器该文件需要下载而不是简单的打开。

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 就可以实现，例：

下载图片

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}