nodejs进阶(4)—读取图片到页面
我们先实现从指定路径读取图片然后输出到页面的功能。
先准备一张图片imgs/dog.jpg。
file.js里面继续添加readImg方法，在这里注意读写的时候都需要声明'binary'。（file.js 在上一篇文章nodejs进阶3-路由处理中有完整的内容）
readImg:function(path,res){
fs.readFile(path,'binary',function(err, file) {
if (err) {
console.log(err);
return;
}else{
console.log("输出文件");
//res.writeHead(200, {'Content-Type':'image/jpeg'});
res.write(file,'binary');
res.end();
}
});
}
服务器创建代码如下，注意在发送请求头时需要声明 {'Content-Type':'image/jpeg'}
var http = require('http');
var file = require('./models/file');
http.createServer(function (request, response) {
//response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
response.writeHead(200, {'Content-Type':'image/jpeg'});
if(request.url!=="/favicon.ico"){ //清除第2此访问
console.log('访问');
//response.write('hello,world');//不能向客户端输出任何字节
file.readImg('./imgs/dog.jpg',response);
//------------------------------------------------
console.log("继续执行");
//response.end('hell,世界');//end在方法中写过
}
}).listen(8000);
console.log('Server running at http://127.0.0.1:8000/');
运行后在浏览器里可以看到读取后的图片显示出来。
当然我们真正应用时并不会这样使用，下面我们在换一种方式调用图片，在html里发送请求图片的方法。
<html> <head></head> <body> 登录： <p>这是一个段落</p> <h1>样式1</h1> <img src="./showImg"></img> </body> <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
（nodejs进阶为一系列教程，可以单独阅读，之间有一定的关联性，最好能系统的进行学习。）
nodejs进阶(4)—读取图片到页面的更多相关文章
- nodeJS基础08：读取图片
1.读取图片 //server.js var http = require("http"); var readImage = require("./readImage&q ...
- Nodejs进阶：如何将图片转成datauri嵌入到网页中去
问题:将图片转成datauri 今天,在QQ群有个群友问了个问题:"nodejs读取图片,转成base64,怎么读取呢?" 想了一下,他想问的应该是 怎么样把图片嵌入到网页中去,即 ...
- Servlet从本地文件中读取图片，并显示在页面中
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...
- nodejs进阶(3)—路由处理
1. url.parse(url)解析 该方法将一个URL字符串转换成对象并返回. url.parse(urlStr, [parseQueryString], [slashesDenoteHost]) ...
- nodejs进阶(5)—接收请求参数
1. get请求参数接收 我们简单举一个需要接收参数的例子 如果有个查找功能,查找关键词需要从url里接收,http://localhost:8000/search?keyword=地球.通过前面的进 ...
- HTML中上传与读取图片或文件（input file）----在路上（25）
input file相关知识简例 在此介绍的input file相关知识为: 上传照片及文件,其中包括单次上传.批量上传.删除照片.增加照片.读取图片.对上传的图片或文件的判断,比如限制图片的张数.限 ...
- nodejs进阶(1)—输出hello world
下面将带领大家一步步学习nodejs,知道怎么使用nodejs搭建服务器,响应get/post请求,连接数据库等. 搭建服务器页面输出hello world var http = require ...
- img src某个php文件输出图片（回复更改图片readfile读取图片等）
在论坛我们经常看到一回复图片就更改等,这功能是怎么实现的呢,其实更验证码道理相同. 新建文件 randimage.php 加入以下代码: <?php $dir='../../images/'; ...
- nodejs进阶(6)—连接MySQL数据库
1. 建库连库 连接MySQL数据库需要安装支持 npm install mysql 我们需要提前安装按mysql sever端 建一个数据库mydb1 mysql> CREATE DATABA ...
随机推荐
- Hibernate二级缓存配置
一.定义: 二级缓存是进程或集群范围内的缓存,可以被所有的Session共享,是可配置的插件 二.二级缓存原理图 解析:每次从二级缓存中取出的对象,都是一个新的对象. 三.配置步骤如下: 同理:以员工 ...
- springmvc的form标签
1.要使用Spring MVC提供的表单标签,首先需要在视图页面添加: <%@ taglib prefix="form" uri="http://www.sprin ...
- 第五章第二例题关于Vector（LRJ）
vector(动态数组)(粘) 一.概述 vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector是一个容器,它能够存放各种类型的对象,简 ...
- [原]零基础学习在Android进行SDL开发系列文章
[原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...
- BZOJ-2929 洞穴攀岩 最大流Dinic(傻逼题)
竟然没有1A真羞耻...1分钟不到读完题,10分钟不到打完....MD没仔细看...WA了一遍,贱! 2929: [Poi1999]洞穴攀行 Time Limit: 1 Sec Memory Limi ...
- 重新学习WCF
近来工作不怎么忙,一直在想一个问题,今年刚刚毕业,对于我们这应届生到底应该学习那些技术呢? 面对着现在技术横生,到底哪项是适合自己的呢?自己一直都在迷茫,若有那位大神再次经过,望给出您宝贵的建议. 最 ...
- GoF设计模式 - 概述
掌握编程语言仅仅意味着掌握了如何给计算机"下命令",而到底要计算机如何去做,怎么指挥,则是另一个问题--如何编程.设计模式是一套程序员的"武功套路",它教我们如 ...
- php+ajax实现登录按钮加载loading效果
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成. 登录表单 <form onsubmit="return chec ...
- centos7下kubernetes（17。kubernetes-回滚）
kubectl apply每次更新应用时kubernetes都会记录下当前配置,保存为一个revision(版次),这样就可以回滚到某个特定的revision 默认配置下,kubernetes只会保留 ...
- Asp.net APP 重置密码的方式
在开发ASP.NET WEB APP的时候,时间长了容易忘记最初设置的密码,即使打开数据库也不好重置,因为密码都是加密存储在数据库中的.下面是几种通过代码重置密码的方式: 第一种: string re ...