pug: есть ли способ обновить изображение в шаблоне?

Question

Я создаю разные образы через canvas, и я хочу, чтобы они отображались в реальном времени в моем шаблоне main.pug, я имею в виду, когда появляется одно изображение, мне нужно перезагрузить страницу, чтобы увидеть следующую, можно «обтекать» изображения без перезагрузки страницы? Код:

var Canvas = require('canvas') 
    , Image = Canvas.Image 
    , canvas = new Canvas(400, 400) 
    , ctx = canvas.getContext('2d') 
    , express = require('express') 
    , app = express() 
    , pug = require('pug'); 
setInterval(function(){ 
ctx.font = '30px Tahoma'; 
ctx.translate(30,0); 
ctx.rotate(.2); 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillStyle = '#2e2e2e'; 
ctx.fillText("example!", 10, 10); 

var buf = canvas.toBuffer(); 
console.log(buf) 
},100) 

//server 

app.get('/', function(req, res){ 
    res.render('main.pug', {imageData:''+canvas.toDataURL()}) 
}) 
var server = app.listen(8080, function(){ 
    console.log('connected to port 8080'); 
}) 

шаблона:

doctype 
head 
    title= camera 
    meta(charset='utf-8') 
body 
    .camera 
    img(src= imageData) 

Спасибо заранее

---

EDIT:

Я добавил

app.use('/static', express.static('public')) 
app.get('/newimage', function(req, res){ 
    res.send(canvas.toDataURL()); 
}) 

и редактируются мой шаблон, как это

doctype 
html 
    head 
    title= camera 
    meta(charset='utf-8') 
    link(rel='stylesheet', href='/static/style.css') 
    script(src='/static/jquery-3.1.1.min.js') 
    script(src='/static/imageGet.js') 
    body 
    .camera 
     img(src= imageData) 

Теперь изображение движется на половину второго конца затем замерзает

Answer 1

Вы должны создать новую конечную точку в Express, как так и отправить новый генерироваться поток изображения:

app.get('/newimage', function(req, res){ 
    res.send(canvas.toDataURL()); 
}) 

и на своем переднем конце есть функция JQuery $.get() для вызова к этой конечной точке и установить ГКЗ img тега

$.get("/newimage", function(data) { 
    $(".camera img").attr("src", data); 
})