帕格：有什麼辦法更新模板中的圖像？

我通過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)

現在，圖像移動的第二端的一半我的模板然後凍結

來源

2017-02-12 Brows Os

您必須創建在快遞新的端點，像這樣和發送生成新圖像流：

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

，並在您的前端有一個jQuery $.get()函數來調用該端點，並設置img標籤的src

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

來源

2017-02-12 20:47:11 Aotik

帕格：有什麼辦法更新模板中的圖像？

回答

相關問題