全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

nodejs进阶4-读取图片到页面

0 40

我们先实现从指定路径读取图片然后输出到页面的功能。

先准备一张图片imgs/dog.jpg。

file.js里面继续添加readImg方法,在这里注意读写的时候都需要声明'binary'。

 1 readImg:function(path,res){
 2         fs.readFile(path,'binary',function(err,  file)  {
 3             if  (err)  {
 4                 console.log(err);
 5                 return;
 6             }else{
 7                 console.log("输出文件");
 8                     //res.writeHead(200,  {'Content-Type':'image/jpeg'});
 9                     res.write(file,'binary');
10                     res.end();
11             }
12         });
13     }

服务器创建代码如下,注意在发送请求头时需要声明 {'Content-Type':'image/jpeg'}

 1 var  http  =  require('http');  
 2 var  file  =  require('./models/file');  
 3 http.createServer(function  (request,  response)  {  
 4     //response.writeHead(200,  {'Content-Type':  'text/html;  charset=utf-8'});  
 5     response.writeHead(200,  {'Content-Type':'image/jpeg'});  
 6         if(request.url!=="/favicon.ico"){  //清除第2此访问  
 7         console.log('访问');  
 8         //response.write('hello,world');//不能向客户端输出任何字节  
 9         file.readImg('./imgs/dog.jpg',response);  
10         //------------------------------------------------  
11         console.log("继续执行");  
12         //response.end('hell,世界');//end在方法中写过  
13     }  
14 }).listen(8000);  
15 console.log('Server  running  at  http://127.0.0.1:8000/');

运行后在浏览器里可以看到读取后的图片显示出来。

当然我们真正应用时并不会这样使用,下面我们在换一种方式调用图片,在html里发送请求图片的方法。

1 <html>
2 <head></head>
3 <body>
4 登录:
5 <p>这是一个段落</p>
6 <h1>样式1</h1>
7 <img src="./showImg"></img>
8 </body>
9 <html>

我们用login.html继续测试,在里面加入一个img标签,src的值为"./showImg",这样浏览器会发送另外一个请求http://localhost:8000/showImg。

这样我们在router里面再加入一个方法showImg,在这个方法里面调用file文件里的readImg方法(在本文的第一段代码里)

showImg:function(req,res){
        file.readImg('./imgs/dog.jpg',res);
}

我们运行http://localhost:8000/login

热忱回答0

要回复文章请先登录注册

  • 加入年费大会员(20每年)
  • 热门标签

    猜你喜欢

    1. Nodejs事件引擎libuv源码剖析之:高效队列(queue)的实现
    2. [原]CentOS7.2部署node-mapnik
    3. [绝对干货]NodeJs在Linux下使用的问题
    4. [Intel Edison开发板] 04、Edison开发基于nodejs和redis的服务器搭建
    5. Node.js:console模块
    6. 如何用node.js批量给图片加水印
    7. Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)
    8. Node.js:进程、子进程与cluster多核处理模块
    9. nodejs中使用http请求返回值为html时乱码问题
    10. nodejs进阶(7)—async异步流程控制

    最近热帖

    1. 注册邮箱写错了,登录进去怎么修改邮箱?
    2. curl 怎么获取地址中两个JSOM数据
    3. (汉化改进作品)BruteXSS:Xss漏洞扫描脚本 0
    4. sass纯新手(一) 1
    5. Javascript中的async await 1
    6. 《游戏编程模式》(8) 4
    7. 【项目记录】-上门洗车-汽车服务 4
    8. 从RPC开始(二)、序列化 4
    9. 微信小程序之快速接入七牛云 5
    10. 开发团队在TFS中使用Git Repository (二) 5

    随机文章

    1. 机器学习算法的随机数据生成
    2. Kafka: Producer (0.10.0.0)
    3. 如何保证消息不丢失?
    4. PHP比较操作符详解(转自hack58)
    5. iOS 原生的 UIButton 点击事件是不允许带多参数的,唯一的一个参数就是默认UIButton本身 那么我们该怎么实现传递多个参数的点击事件呢?