0
我在項目中使用節點畫布;本質上該項目是關於在瀏覽器屏幕上顯示圖像，並能夠通過REST API POSTs控制圖像的位置。這工作正常，但在POST上我想自動刷新瀏覽器。Javascript節點js瀏覽器刷新POST
我已經看過：
NPM包（瀏覽器刷新等）;但他們需要把一些代碼放在客戶端頁面，但我沒有任何HTML客戶端頁面。
調用res.redirect;這似乎沒有做任何事情。
在POST方法中調用我的draw（）方法：我得到'write after end'的錯誤。
有幫助嗎？同樣，問題是刷新瀏覽器（或其中的一部分）在POST方法中的新座標上。
下面的代碼。
乾杯， 馬特
節點server.js：
//Lets require/import the HTTP module
var http = require('http');
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var fs = require('fs')
var path = require('path')
var draw = require('./draw_badge');
var robot1;
var robot1_xcoord = 30;
var robot1_ycoord = 100;
var robot2;
var robot2_xcoord = 50;
var robot2_ycoord = 30;
/** bodyParser.urlencoded(options)
* Parses the text as URL encoded data (which is how browsers tend to send form data from regular forms set to POST)
* and exposes the resulting object (containing the keys and values) on req.body
*/
app.use(bodyParser.urlencoded({
extended: true
}));
/**bodyParser.json(options)
* Parses the text as JSON and exposes the resulting object on req.body.
*/
app.use(bodyParser.json());
/** -------- Start -----
*
*/
{
app.get('/', function (req, res) {
console.log("Xcoord: " + robot1_xcoord);
res.setHeader('Content-Type', 'image/png');
// redraw everything
draw(robot1_xcoord,robot1_ycoord, robot2_xcoord,robot2_ycoord).pngStream().pipe(res);
});
// Getting a POST
app.post('/', function (req, res) {
console.log(req.body.id);
if (req.body.id=="1")
{
console.log("robot1 change");
robot1_xcoord = req.body.xcoordinate;
robot1_ycoord = req.body.ycoordinate;
}
else
if (req.body.id=="2")
{
console.log("robot2 change");
robot2_xcoord = req.body.xcoordinate;
robot2_ycoord = req.body.ycoordinate;
}
// draw(robot1_xcoord,robot1_ycoord, robot2_xcoord,robot2_ycoord).pngStream().pipe(res);
//res.redirect('localhost:5000');
res.send('Got a POST request');
// try
//res.redirect(req.get('referer'));
/*
return http.get({
host: 'localhost',
path: '/'
}, function(response) {
// Continuously update stream with data
var body = '';
response.on('data', function(d) {
body += d;
});
response.on('end', function() {
// Data reception is done, do whatever with it!
var parsed = JSON.parse(body);
});
});
*/
});
// Main app - Listen
app.listen(process.env.PORT || 5000, function() {
console.log('Example app listening !');
});
和
draw_badge.js：
var Canvas = require('canvas')
var fs = require('fs')
function draw_badge(x,y) {
var x, y, i
ctx.clearRect(0, 0, 120, 120)
ctx.save()
ctx.translate(160, 160)
ctx.beginPath()
ctx.lineWidth = 14
ctx.strokeStyle = '#325FA2'
ctx.fillStyle = '#eeeeee'
ctx.arc(x, y, 42, 0, Math.PI * 2, true)
ctx.stroke()
ctx.fill()
return canvas;
}
function draw_robot(x,y) {
var Image = Canvas.Image
var canvas = new Canvas(600, 600)
var ctx = canvas.getContext('2d')
var img = new Image()
img.src = canvas.toBuffer()
ctx.drawImage(img, 0, 0, 50, 50)
ctx.drawImage(img, 50, 0, 50, 50)
ctx.drawImage(img, 100, 0, 50, 50)
img.src = fs.readFileSync('./kuka.png')
ctx.drawImage(img, 100, 0, img.width , img.height)
//img = new Image()
img.src = fs.readFileSync('./robot.jpeg')
ctx.drawImage(img, x, y, img.width/2, img.height/2)
// new
canvas.createPNGStream().pipe(fs.createWriteStream('./image-robot.png'))
return canvas
}
function draw(x1,y1,x2,y2)
{
Image = Canvas.Image,
canvas = new Canvas(600, 600),
ctx = canvas.getContext('2d');
canvas = draw_robot(x1,y1);
canvas = draw_badge(x2,y2);
return canvas;
}
module.exports = draw;
什麼觸發了POST？如果除了客戶端的圖片之外沒有其他東西，你不能擁有POST嗎？客戶是什麼？如果客戶端是網絡瀏覽器，則不能在沒有HTML和/或JS的情況下進行POST ... – jcaron
對服務器的調用（即curl調用）會觸發POST，並具有關於在哪裏繪製圖像的座標信息。 node-canvas允許我從服務器端渲染圖片..（請參閱draw_badge.js ..） – MattLieber