Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

nodejs - How to read and output jpg image?

I've been trying to find an example of how to read a jpeg image and then show the image.

var http = require('http'), fs = require('fs');  http.createServer(function (req, res) {     res.writeHead(200, {'Content-Type': 'text/html'});  fs.readFile('image.jpg', function (err, data) {   if (err) throw err;   res.write(data); });  res.end(); }).listen(8124, "127.0.0.1"); console.log('Server running at http://127.0.0.1:8124/'); 

Tried the following code but I think the encoding needs to be set as buffer. Using console.log it outputs 'Object' for the data.

like image 314
mesh Avatar asked Mar 02 '12 22:03

mesh


People also ask

How do I read a JPEG in node JS?

writeHead(200, {'Content-Type': 'text/html'}); fs. readFile('image. jpg', function (err, data) { if (err) throw err; res. write(data); }); res.

How do I read a PNG file in node JS?

js ― A PNG decoder in JS for the canvas element or Node. js. var PNG = require('png-js'); var myimage = new PNG('myimage. png'); var width = myimage.


2 Answers

Here is how you can read the entire file contents, and if done successfully, start a webserver which displays the JPG image in response to every request:

var http = require('http') var fs = require('fs')  fs.readFile('image.jpg', function(err, data) {   if (err) throw err // Fail if the file can't be read.   http.createServer(function(req, res) {     res.writeHead(200, {'Content-Type': 'image/jpeg'})     res.end(data) // Send the file data to the browser.   }).listen(8124)   console.log('Server running at http://localhost:8124/') }) 

Note that the server is launched by the "readFile" callback function and the response header has Content-Type: image/jpeg.

[Edit] You could even embed the image in an HTML page directly by using an <img> with a data URI source. For example:

  res.writeHead(200, {'Content-Type': 'text/html'});   res.write('<html><body><img src="data:image/jpeg;base64,')   res.write(Buffer.from(data).toString('base64'));   res.end('"/></body></html>'); 
like image 93
maerics Avatar answered Oct 10 '22 23:10

maerics


Two things to keep in mind Content-Type and the Encoding

1) What if the file is css

if (/.(css)$/.test(path)) {   res.writeHead(200, {'Content-Type': 'text/css'});    res.write(data, 'utf8'); }  

2) What if the file is jpg/png

if (/.(jpg)$/.test(path)) {   res.writeHead(200, {'Content-Type': 'image/jpg'});   res.end(data,'Base64'); } 

Above one is just a sample code to explain the answer and not the exact code pattern.

like image 24
user2248133 Avatar answered Oct 11 '22 00:10

user2248133