前端下载图片总结

cgspine 发布于2019-08-23 12:53 / 800人阅读

摘要：这时候后台要提供一个请求的服务，并设置消息响应头，告诉浏览器该文件需要下载。

前端下载图片总结

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

1、服务端配合实现

这种情况对于前端开发非常简单，只需要一个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 就可以实现，例：

下载图片

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
}

GPU云服务器云服务器前端下载下载图片前端js图片上传教程图片下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99073.html

前端下载图片总结

摘要：这时候后台要提供一个请求的服务，并设置消息响应头，告诉浏览器该文件需要下载。前端下载图片总结前端下载图片分为两大类：一是服务端配合实现（即下载后台服务提供的资源）；二是纯前端下载 1、服务端配合实现这种情况对于前端开发非常简单，只需要一个a标签，如：下载图片当直接访问的某个文件时，如果该文件是二进制等浏览器无法解析的文件，浏览器才会下载该文件，但如果浏览器可以自己...

Freelander 2019-08-02 11:56 评论0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：发布应用市场的平台抢红包工具红包精灵开源啦掘金红包精灵，如果喜欢，点个开源不易。作者将原素材文章进行了新内容的添加和重新排列，但是因为文章高效的代码编写技巧总结前端掘金本文总结了代码编写技巧，来提升你的和代码。收藏安卓开发中非常实用优秀的库! 有图有真相! - Android - 掘金本来是打算收藏工具类的,但转念一想,已经有这么多优秀的库了,就没必要再去重复造轮子了,便归纳工作中比...

ermaoL 2019-08-29 13:03 评论0 收藏0
web前端——美化效果总结

摘要：概述项目开发过程中使用到了不少前端美化效果的方法，总结一下图片作为背景要实现的效果是，任意一张图片，不需要调整图片尺寸，图片完全填充网页背景。概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下 1 图片作为背景要实现的效果是，任意一张图片img-page-background.png，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg...

awkj 2019-08-01 17:28 评论0 收藏0
web前端——美化效果总结

摘要：概述项目开发过程中使用到了不少前端美化效果的方法，总结一下图片作为背景要实现的效果是，任意一张图片，不需要调整图片尺寸，图片完全填充网页背景。概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下 1 图片作为背景要实现的效果是，任意一张图片img-page-background.png，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg...

Scorpion 2019-08-20 18:56 评论0 收藏0
web前端——美化效果总结

摘要：概述项目开发过程中使用到了不少前端美化效果的方法，总结一下图片作为背景要实现的效果是，任意一张图片，不需要调整图片尺寸，图片完全填充网页背景。概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下 1 图片作为背景要实现的效果是，任意一张图片img-page-background.png，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg...

DobbyKim 2019-08-29 13:13 评论0 收藏0