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)

提前谢谢

编辑：

我已添加

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标记的src

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

帕格：有没有办法更新模板中的图像？

1 个答案: