nodejs读取图片返回给浏览器显示

本文主要是使用nodejs处理图片等资源返回给浏览器显示方法，但不只限制于图片，也可以是音频视频等其他非字符串文件的返回和显示。也可以扩展成nodejs静态资源服务器的开发方法。

请求头说明

在http响应里面有几个重要的东西，Content-Type 说明文件渲染MIME类型,这是我们本文的相关处理关键。

常用的MIME类型

{
 "css": "text/css",
 "gif": "image/gif",
 "html": "text/html",
 "ico": "image/x-icon",
 "jpeg": "image/jpeg",
 "jpg": "image/jpeg",
 "js": "text/javascript",
 "json": "application/json",
 "pdf": "application/pdf",
 "png": "image/png",
 "svg": "image/svg+xml",
 "swf": "application/x-shockwave-flash",
 "tiff": "image/tiff",
 "txt": "text/plain",
 "wav": "audio/x-wav",
 "wma": "audio/x-ms-wma",
 "wmv": "video/x-ms-wmv",
 "xml": "text/xml"
}

处理方法

一、静态返回资源

原理：

使用node.js的fs.readFile来处理。根据请求地址，转换成实际的文件地址。判断文件是否存在，不存在返回404，存在则读取文件 ,并返回文件

//设置请求的返回头type,content的type类型列表见上面
response.setHeader("Content-Type", contentType);
//格式必须为 binary 否则会出错
var content = fs.readFileSync(url,"binary");
response.writeHead(200, "Ok");
response.write(content,"binary"); //格式必须为 binary，否则会出错
response.end();

二、动态文件流处理

原理：

使用nodejs 的fs.createReadStream来处理，这样处理的好处是断点续传。

response.set( 'content-type', mimeType );//设置返回类型
var stream = fs.createReadStream( imageFilePath );
var responseData = [];//存储文件流
if (stream) {//判断状态
 stream.on( 'data', function( chunk ) {
  responseData.push( chunk );
 });
 stream.on( 'end', function() {
  var finalData = Buffer.concat( responseData );
  response.write( finalData );
  response.end();
 });
}

1.客户端读取文件 var content = fs.createReadStream(filePath);
2.把内容转为数组 var buffer = new Buffer(content); 传给 httpServer这一步需要特别注意，一定不能把 content 当成普通的字符串处理传给 httpServer
3.httpServer 解析出数组 var list = …
4.httpServer 把数组转为 Buffer, var buffer = new Buffer(list);
5.返回 response.write(buffer.toString(),”binary”); //注意，这里必须转为字符串，不能以 Buffer 传给浏览器.
6.值得注意的是，这里的 buffer 不能直接返回给客户端，nodejs 以 binary 格式读取的文件就是一个字符串，只是编码不是普通的 utf-8

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • node.js读取Excel数据（下载图片）的方法示例

    node.js读取Excel数据（下载图片）的方法示例

    前言 因为组织观影活动需要统计报名和收集影评,选择微信小程序"报名工具",管理员下载数据发现影评只是一个图片的URL链接,需要自己手动下载,哪里能难倒程序员? 1. 下载的Excel数据表: 2. 代码: const xlsx = require('xlsx'); const mkdirp = require('mkdirp'); const request = require('request'); const fs = require('fs'); const workbook =

  • nodejs实现获取本地文件夹下图片信息功能示例

    nodejs实现获取本地文件夹下图片信息功能示例

    本文实例讲述了nodejs实现获取本地文件夹下图片信息功能.分享给大家供大家参考,具体如下: 新建一个file.js 项目目录如下 //获取项目工程里的图片 var fs = require('fs');//引用文件系统模块 var image = require("imageinfo"); //引用imageinfo模块 function readFileList(path, filesList) { var files = fs.readdirSync(path); files.f

  • nodejs读取图片返回给浏览器显示

    本文主要是使用nodejs处理图片等资源返回给浏览器显示方法,但不只限制于图片,也可以是音频视频等其他非字符串文件的返回和显示.也可以扩展成nodejs静态资源服务器的开发方法. 请求头说明 在http响应里面有几个重要的东西,Content-Type 说明文件渲染MIME类型,这是我们本文的相关处理关键. 常用的MIME类型 { "css": "text/css", "gif": "image/gif", "htm

  • python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法

    如下所示: #coding=utf-8 #读取图片 返回图片某像素点的b,g,r值 import cv2 import numpy as np img=cv2.imread('./o.jpg') px=img[10,10] print px blue=img[10,10,0] print blue green=img[10,10,1] print blue red=img[10,10,2] print blue 以上这篇python opencv 读取图片 返回图片某像素点的b,g,r值的实现方

  • 利用nodejs读取图片并将二进制数据转换成base64格式

    目录 读取图片并将二进制数据转换成base64格式 nodejs读取服务器图片,转为base64显示在网页上 读取图片并将二进制数据转换成base64格式 首先,使用nodejs进行数据读取,需要用到nodejs的fs模块进行数据读取: fs.readFile('你的资源路径','binary',function(err,data){     if(err){         console.log(err)     }else{         console.log('数据读取成功');  

  • java IO流读取图片供前台显示代码分享

    java IO流读取图片供前台显示代码分享

    最近项目中需要用到IO流来读取图片以提供前台页面展示,由于以前一直是用url路径的方式进行图片展示,一听说要项目要用IO流读取图片感觉好复杂一样,但任务下达下来了,做为程序员只有选择去执行喽,于是找了点资料看了会api, 嘿感觉挺简单的,由于是第一次采用IO流的方式进行读取图片供页面显示,所以把以下代码记录一下 后台代码: /** * IO流读取图片 by:long * @return */ @RequestMapping(value = "/IoReadImage/{imgName}"

  • 解决python cv2.imread 读取中文路径的图片返回为None的问题

    使用cv2读取图片时,输出图片形状大小时出现报错" 'NoneType' object has no attribute shape",后来排查发现读取图片的返回值image为None, 这就说明图片根本就没有被读取. 下面图片是问题问题解决后,为了更好的展示,写的代码展示,这是正常的因果关系,找错误排查时是从下往上推. 使用PIL读取图像,能够成功读取图片,借此了解图片的大小和格式,代码如下图所示: cv.imread函数能够成功读取非中文路径的图片,所以就想到是不是中文路径的问题,

  • 从零开始学习Node.js系列教程三：图片上传和显示方法示例

    从零开始学习Node.js系列教程三：图片上传和显示方法示例

    本文实例讲述了Node.js图片上传和显示方法.分享给大家供大家参考,具体如下: index.js var server = require("./server"); var router = require("./router"); var requestHandlers = require("./requestHandlers"); var handle = {} handle["/"] = requestHandlers

  • JAVA读取文件流,设置浏览器下载或直接预览操作

    最近项目需要在浏览器中通过URL预览图片.但发现浏览器始终默认下载,而不是预览.研究了一下,发现了问题: // 设置response的Header,注意这句,如果开启,默认浏览器会进行下载操作,如果注释掉,浏览器会默认预览. response.addHeader("Content-Disposition", "attachment;filename=" + FileUtil.getOriginalFilename(path)); 然后需要注意: response.s

  • Android 按指定大小读取图片的实例

    在Android开发中,我们经常遇到Android读取图片大小超过屏幕显示的图(一般只要显示一定规格的预览图即可),在图片特别多或者图片显示很频繁的时候要特别注意这个问题,下面介绍个按指定大小读取图像的方法. 实现原理:首先获取图片文件的图像高和宽,如果小于指定比例,则直接读取:如果超过比例则按指定比例压缩读取. 捕获OutOfMemoryError时注意点:后面返回的是null,不要马上从别的地方再读图片,包括R文件中的,不然依然会抛出这个异常,一般在初始化的时候缓存默认图片,然后显示缓存中的

  • vue+springboot图片上传和显示的示例代码

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring boot:2.2.3 三.正文 在客户开发一套门户管理系统时,集成了tinymce组件,用于编辑内容,springboot不同于其他项目.  是集成tomcat的,文件和图片是不能直接访问的.所以我在做集成富文本编辑器时,需要处理图片的问题. 这个问题跟上传头像等显示图片的功能是类似的.下面记录详情步骤

  • django 读取图片到页面实例

    首先,我们看看models.py里的模型,有个upload_to参数,为了和过去一刀两断,楼主决定给upload_to赋值一个新的值叫avatar/,这个参数的意思是把文件上传到MEDIA_ROOT/avatar/下面. 既然这里upload_to的值是连接在MEDIA_ROOT/路径后的一部分,所以很自然的只能写成avatar/或者./avatar/,而不能写成/avatar/,楼主已经以身试法过. 还有一点,这里提到了MEDIA_ROOT,可是我们一直没设置过啊. headImg = mod

随机推荐