-1
node.js. kullanarak 3333 bağlantı noktasında yerel bir sunucu oluşturdum. Benim sorunum yerel görüntüleri görüntüleyemem. Harici görüntüler gösterilebilir. Express kullanmadan bir çözüm varsa bana birileri söyleyebilir mi? Ve eğer evet ise bu çözüm ne olurdu? Tek yapmaya çalıştığım şey bir görüntüyü göstermek ama işe yaramıyor. Ayrıca koduma bir stil sayfası eklemenin bir yolu var mı?node.js sunucusu kullanarak görüntüler nasıl görüntülenir?
Express'i kullanarak varolan düğüm sunucusuyla dosya yüklemek mümkün mü?
Yerel resimleri görüntülemek için denedim kodu (denedim ve diğer çözümler, sen benim tüm kod, hiçbir şans görebilirsiniz):
res.write('<img src="data:image/jpeg;base64,http://localhost:3333/images/top-band.png')
res.write(new Buffer(content).toString('base64'));
res.write('"/>');Ve burada bütün kod:
//include http, fs and url module
var http = require('http'),
fs = require('fs'),
path = require('path'),
url = require('url');
imageDir = 'C:/Users/Ionut/maguay/node/';
//create http server listening on port 3333
http.createServer(function (req, res) {
//use the url to parse the requested url and get the image name
var query = url.parse(req.url,true).query;
pic = query.image;
\t \t console.log(pic);
if (typeof pic === 'undefined') {
getImages(imageDir, function (err, files) {
var imageLists = '<ul style="padding: 0; margin: 0;">';
for (var i=0; i<files.length; i++) {
imageLists += '<li style="list-style-type: none;"><a href="/?image=' + files[i] + '"><img src="http://localhost:3333/' + files[i] + '"></li>';
}
imageLists += '</ul>';
res.writeHead(200, {'Content-type':'text/html'});
res.end(imageLists);
});
} else {
//read the image using fs and send the image content back in the response
fs.readFile(imageDir + pic, function (err, content) {
if (err) {
res.writeHead(400, {'Content-type':'text/html'})
console.log(err);
res.end("No such image");
} else {
//specify the content type in the response will be an image
//res.writeHead(200,{'Content-type':'image/png'});
\t \t \t \t res.writeHead(200, {'Content-type':'text/html'})
\t \t \t \t //res.writeHead(200, {'Content-type':'text/html'})
\t \t \t \t //res.write("<link rel='stylesheet' href='style.css?v=123132'>")
\t \t \t \t
\t \t \t \t var pic_cuv = pic.replace('.png','.txt');
\t \t \t \t fs.readFile(imageDir + pic_cuv, function (errc, cuvcontent) {
\t \t \t \t \t if (!err) {
\t \t \t \t \t res.write("<style>body{margin: 0; padding: 0;} #main-container{ margin: 0 auto; width: 1520px; height: 1000px; display: table-cell; vertical-align: middle;} @media print{* {-webkit-print-color-adjust:exact;}} #words{padding:0; margin: 0; display: inline-block;} #words li{ list-style-type: none; display: inline-block; width: 33.33%;} #words li img{ width: 100%; }</style>");
\t \t \t \t \t var threeWords = cuvcontent.toString();
\t \t \t \t \t \t threeWords = threeWords.split('&h=250&w=1000&zc=0&q=100');
\t \t \t \t \t \t
\t \t \t \t \t \t //res.write(threeWords);
\t \t \t \t \t \t res.write("<div id='main-container' style='background: transparent url(data:image/png;base64,"+ new Buffer(content).toString('base64') +") no-repeat center;'>");
\t \t \t \t \t \t \t res.write('<img src="/images/top-band.png"/>');
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t res.write('<img src="data:image/jpeg;base64,/images/top-band.png')
\t \t \t \t \t \t \t res.write(new Buffer(content).toString('base64'));
\t \t \t \t \t \t \t res.write('"/>');
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t res.write('<ul id="words">');
\t \t \t \t \t \t \t \t for(var i=0; i<threeWords.length; i++){
\t \t \t \t \t \t \t \t \t //console.log(threeWords[i]);
\t \t \t \t \t \t \t \t \t if(threeWords[i]){
\t \t \t \t \t \t \t \t \t \t res.write('<li>');
\t \t \t \t \t \t \t \t \t \t \t res.write('<img src="' + threeWords[i] + '&h=250&w=1000&zc=0&q=100"/>');
\t \t \t \t \t \t \t \t \t \t res.write('</li>');
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t res.write('</ul>');
\t \t \t \t \t \t res.write("</div>");
\t \t \t \t \t
\t \t \t \t \t \t \t
\t \t \t \t \t \t /*res.write('<img src="data:image/jpeg;base64,')
\t \t \t \t \t \t \t res.write(new Buffer(content).toString('base64'));
\t \t \t \t \t \t \t res.write('"/>');*/
\t \t \t \t \t }
\t \t \t \t \t
\t \t \t \t \t res.end();
\t \t \t \t });
}
});
}
}).listen(3333);
console.log("Server running at http://localhost:3333/");
//get the list of png files in the image dir
function getImages(imageDir, callback) {
var fileType = '.png',
files = [], i;
fs.readdir(imageDir, function (err, list) {
\t
for(i=0; i<list.length; i++) {
if(path.extname(list[i]) === fileType) {
files.push(list[i]); //store the file name into the array files
}
}
callback(err, files);
});
}
kullanım: 'res.writeHead (200, { 'Content-Type': 'image/jpg'}) – JordanHendrix
Ayrıca, kodunuzun okunması zor. Önce tarayıcımın yollarının doğru olduğundan emin olmak için kodu kullanmadan istediğim resimleri gönderiyorsam bakarım. – jmugz3
Neden gerçek URL'yi veri-url'nin bir parçası olarak dahil ediyorsunuz? Image/jpeg; base64, 'sonrası her şey sadece kodlanmış veriler olmalıdır. – Emissary