pug：テンプレートの画像を更新する方法はありますか？

Question

canvasで別の画像を作成していますが、それらをmain.pugテンプレートにリアルタイムで表示したいのですが、1つの画像が表示されたら、次の画像を表示するためにページをリロードする必要があります。ページをリロードせずに画像を「ストリーム」することは可能ですか？ コード：

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) 

今すぐ画像が第二の端部の半分のために動いているように私のテンプレートは、あなたがそうのようにExpressの新しいエンドポイントを作成し、生成された新しいを送信する必要があります

Answer 1

フリーズ編集しました画像ストリーム：

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

とあなたのフロントエンドには、そのエンドポイントに呼び出し、imgタグ

0のSRCを設定するためのjQueryの $.get()機能を持っています

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