nodejs服务器读取图片返回给前端(浏览器)显示

1 前言

项目需要用nodejs服务器给前端传递图片,网上找了好多资料,多数都是怎么在前端上传图片的,然后通过看runoob.com菜鸟教程,发现其实是非常简单,用express框架就行了。

2 代码

2.1 用原生的版本(包含了返回网页功能)

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

var http = require(‘http‘);

var fs = require(‘fs‘);

var url = require(‘url‘);

// 创建服务器

http.createServer( function (request, response) { 

   // 解析请求,包括文件名

   var pathname = url.parse(request.url).pathname;

   // 输出请求的文件名

   console.log("Request for " + pathname + " received.");

   // 从文件系统中读取请求的文件内容

   fs.readFile(pathname.substr(1), function (err, data) {

   var urlContent = pathname.substr(1);

   if(urlContent.lastIndexOf("png") > -1){

       if (err) {

         console.log(err);

         // HTTP 状态码: 404 : NOT FOUND

         // Content Type: text/plain

         response.writeHead(404, {‘Content-Type‘: ‘text/html‘});

      }else{            

         // HTTP 状态码: 200 : OK

         // Content Type: text/plain

         response.writeHead(200, {‘Content-Type‘: ‘image/png‘});

        var imageFilePath = pathname.substr(1);

        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();

            });

        }             

      }

   }else if(urlContent.lastIndexOf("html") > -1){

     if (err) {

         console.log(err);

         // HTTP 状态码: 404 : NOT FOUND

         // Content Type: text/plain

         response.writeHead(404, {‘Content-Type‘: ‘text/html‘});

      }else{            

         // HTTP 状态码: 200 : OK

         // Content Type: text/plain

         response.writeHead(200, {‘Content-Type‘: ‘text/html‘});           

         // 响应文件内容

         response.write(data.toString());       

      }

      //  发送响应数据

      response.end();

   }else{

     console.log("unSupport Type, Please contact Administrator err url="+urlContent); 

   }    

   });  

}).listen(80);

 2.2 用Express框架版本

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

var express = require(‘express‘);

var app = express();

app.use(express.static(‘public‘));

app.get(‘/public/images/*‘, function (req, res) {

    res.sendFile( __dirname + "/" + req.url );

    console.log("Request for " + req.url + " received.");

})

 

app.get(‘/public/html/index.html‘, function (req, res) {

   res.sendFile( __dirname + "/" + "/public/html/index.html" );

   console.log("Request for " + req.url + " received.");

})

//如果访问网页和本地同名,可以使用以下版本

app.get(‘/public/html/*.html‘, function (req, res) {

   res.sendFile( __dirname + "/" + req.url );

   console.log("Request for " + req.url + " received.");

})

app.get(‘/public/register‘, function (req, res) {

   res.sendFile( __dirname + "/" + "/public/html/register.html" );

   console.log("Request for " + req.url + " received.");

})

var server = app.listen(80, function () {

  console.log(‘Server running at http://127.0.0.1:80/‘);

})

原文地址:https://www.cnblogs.com/juehai/p/9606511.html

时间: 2024-10-31 02:33:26

nodejs服务器读取图片返回给前端(浏览器)显示的相关文章

将图片返回到前端

将图片转换为字符流返回到前端img from flask import send_file from io import BytesIO ls_f = redi.get(photo)ls_f1 = base64.b64decode(ls_f)#将字符流写入BytesIO(主要用于读取缓存中的数据)by = BytesIO(ls_f1)return send_file(by, mimetype='image/png') 返回前端为二进制字符流,所以可以直接传入前端为二进制图片流,音频文件也一样 来

springmvc实现图片下载以及在浏览器显示

一.不在同一台主机,通过给对方文件的方式 Controller @RequestMapping(value = "/down/{uuid}", method = RequestMethod.GET)   @ResponseBody   public void downloadImage(@PathVariable("uuid") final String uuid, HttpServletResponse response) {     flService.down

Android开发:获得相册图片、拍照、照片上传服务器、从服务器读取照片

文章目录 一 整体功能描述 二 功能实现 1 获得图片 2上传到服务器并保存 3从服务器中获得图片并显示 4Common类中的辅助工具 一. 整体功能描述 通过从相册中选择图片或者拍照的方式获得图片,然后将这个图片上传至服务器,同时实现从服务器上读取该图片. 二. 功能实现 1.1 获得图片 (1)通常情况下,有以下两种方式: 从相册中选择图片 这种方式原理比较简单,就是从SDK中获得照片,转成字节再生产Bitmap对象用于显示即可. 拍照获得图片 拍照获取的图片原理就是先拍照存储,然后再读取,

nodeJS基础08:读取图片

1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage"); http.createServer(function(res, res){ // res.writeHead(200, {"Content-Type":"text/html; charset=uf-8"}); res.writeHead(200, {&qu

Android中读取图片EXIF元数据之metadata-extractor的使用

一.引言及介绍 近期在开发中用到了metadata-extractor-xxx.jar 和 xmpcore-xxx.jar这个玩意, 索性查阅大量文章了解学习,来分享分享. 本身工作也是常常和处理大图片打交道,摸索摸索也是多多益善. 首先介绍一下什么是EXIF.EXIF是 Exchangeable Image File 的缩写,这是一种专门为数码相机照片设定的格式.这样的格式能够用来记录数字照片的属性信息,如相机的品牌及型号.相片的拍摄时间.拍摄时所设置的光圈大小.快门速度.ISO等信息.除此之

拍照/从相册读取图片后进行裁剪的方法

本范例实现的是用户可以通过拍照.相册获取图片,然后进行裁剪,最后将结果保存在IamgeView中.当然你可以选择将结果同时存放在sd卡中,作为以后的缓存. 思路: 1.通过拍照获取图片 进入系统自带的相机界面——>拍照——>保存在sd卡中——>读取sd卡的文件进行裁减.PS:裁剪前先判断是否获取到图片了 2.通过系统相册获取图片 进入系统相册——>找到图片——>进行裁减.PS:裁剪前线判断是否获取到系统的图片了 接下来贴上实现方法: 1.进入拍照界面或者相册的方法,获取信息后

自己主动图片生成在前端开发中的一些尝试

图片处理在前端开发过程中占领了不少的时间.非常是累人.在本文中我们不讨论怎样提高切图的效率.我们讨论还有一个问题:怎样处理设计稿中的一些简单图形. 不知道你又没有遇到过这样的烦恼:"设计师给你的精致的PSD中有一个简单图形,就是那用用多边形.圆形和线条组成的图形.这个图形用css3实现不了,或者能实现.但为了兼容某些浏览器不能用css3来实现,仅仅能切图.好的.你非常快切完了并在样式中引用了. 但没过多久需求上要求改下图片的颜色,而这是你已经将导出图片的那个PSD删除了,你还得又一次在设计稿中把

nginx读取图片没有权限

场景是这样的,我们项目中上传图片到linux服务器后,保存图片存储路径和网络访问路径.app中用数据库返回的 图片访问路径来访问图片(nginx通过nfs方式读取图片).但是访问不到.要手动 chmod  777 才能访问. 这显然不合理,通过修改weblogic 的startWeblogic.sh 中的unsum   -117  改为 -112(记不太清了)就ok了.

自动图片生成在前端开发中的一些尝试

图片处理在前端开发过程中占据了不少的时间,很是累人.在本文中我们不讨论如何提高切图的效率,我们讨论另一个问题:如何处理设计稿中的一些简单图形.不知道你又没有遇到过这种烦恼:"设计师给你的精致的PSD中有一个简单图形,就是那用用多边形.圆形和线条组成的图形.这个图形用css3实现不了,或者能实现,但为了兼容某些浏览器不能用css3来实现,只能切图.好的,你很快切完了并在样式中引用了.但没过多久需求上要求改下图片的颜色,而这是你已经将导出图片的那个PSD删除了,你还得重新在设计稿中把这个图形抠出来&