Javascript p5在node.js中中断

我正在尝试创建一个在服务器上运行的节点应用程序。我在p5及其库vida中创建了一个运动检测系统

我首先尝试了全局模式。然后我得到了一些错误，比如createCanvas没有定义。 现在我尝试了实例模式，但我觉得它变得更糟了。我得到的错误窗口没有在p5.js脚本中定义，require也没有在p5.dom.js脚本中定义

如何在节点应用程序中正确实现我的p5元素？

我读过a.o.stackoverflow的文章，但我不知道在节点服务器的浏览器中运行p5意味着什么

这里是我的server.js

const express = require('express');
const multer = require('multer');
const sketch = require('./public/app.js');

const PORT=3000;
const upload = multer({dest: __dirname + '/uploads/images'});
const app = express();

//things possible to be accessed by the client
app.use(express.static('./public'));
app.use(express.static('./public/scripts'));

console.log(sketch.setup, sketch.draw);

//test
app.get('/', function (req, res) {
    res.send('hello world');
  });

app.post('/upload', upload.single('photo'), (req, res) => {
    if(req.file) {
        res.json(req.file);
    }
    else throw 'error';
});

app.listen(PORT, () => {
    console.log('Listening at ' + PORT );
});

下面是我的app.js的主要部分

'use strict';
/******** {SKETCH INSTANCE} *********/
var p5 = require('p5');
var myp5 = new p5(sketch);
var sketch = (s) => {
/**** { VIDA video } ****/
var myCapture;
var myVida;

function initCaptureDevice() {
  //code
};

/**** { P5 } ****/
  s.setup = function() {
    s.createCanvas(640, 480);
    initCaptureDevice();
    startup();

    myVida = new s.Vida(this); // create the object
    //vida code

    s.frameRate(10);
  };

  s.draw = function() {
    if(myCapture !== null && myCapture !== undefined) { // safety first
      s.background(0, 0, 255);

      myVida.update(myCapture);
      s.image(myVida.thresholdImage, 320, 240);

      // let's describe the displayed images
      
      /*DRAWING*/
      // define size of the drawing

      /*ACTIVE ZONES*/
      for(var i = 0; i < myVida.activeZones.length; i++) {
        //code

        /*DETECT MOTION*/
        if(myVida.activeZones[i].isChangedFlag) {
          if(myVida.activeZones[i].isMovementDetectedFlag) {
            //the state changed from noMovement to movement
            //take snapshot and upload it to a public folder
            snapshot();
          };
        };
      }
      s.pop(); // restore memorized drawing style and font
    }
    else {
      s.background(255, 0, 0);
    }
  }
}
exports.sketch = sketch;

“严格使用”；
/********{草图实例}*********/
var p5=要求（“p5”）；
var myp5=新的p5（草图）；
变量草图=（s）=>{
/****{VIDA video}****/
var-myCapture；
粘虫变种；
函数initCaptureDevice（）{
//代码
};
/****{P5}****/
s、 设置=函数（）{
s、 createCanvas（640480）；
initCaptureDevice（）；
启动（）；
myVida=new s.Vida（this）；//创建对象
//维达码
s、 帧率（10）；
};
s、 draw=函数（）{
如果（myCapture！==null&&myCapture！==undefined）{//安全第一
s、 背景（0,0255）；
myVida.update（myCapture）；
s、 图像（myVida.thresholdImage，320240）；
//让我们描述一下显示的图像
/*绘图*/
//定义图形的大小
/*活动区*/
对于（var i=0；i

谢谢你抽出时间，

---

芥末成型器

P5.js不能在浏览器之外使用。然而，如果你必须这样做的话，从技术上讲，它可以发挥作用。我在下面发布了一个示例（您也可以通过my查看和运行该示例）。但是要小心，不能保证这对您的用例有效。在本例中，仅将画布的图像数据写入文件是一件非常痛苦的事情，因此您的里程数可能会有所不同

index.js

const Window=require（'Window'）；
常数fs=要求（'fs'）；
const{Blob}=require（'./Blob.js'）；
//p5js预期存在的全局变量（必须在导入之前出现）
global.window=新窗口（）；
//重写JSDOM可怕的Blob实现
global.window.Blob=Blob；
global.document=global.window.document；
global.screen=global.window.screen；
global.navigator=global.window.navigator；
常数p5=要求（'p5'）；
const inst=新的p5（p=>{
p、 设置=函数（）{
console.log（'rendering'）；
让canvas=p.createCanvas（200200）；
p、 背景（“灰色”）；
p、 填充（“深红色”）；
p、 圆圈（p.宽度/2，p.高度/2100）；
canvas.elt.toBlob(
数据=>{
让writeStream=fs.createWriteStream（“./out.png”）
writeStream.on（'finish'，（）=>{
//现在，所有写入操作都已完成。
完成（）；
});
writeStream.on（'error'，（err）=>{
控制台错误（err）；
});
log（'file size:'+data.size）；
writeStream.write（data.arrayBuffer（））；
writeStream.end（）；
},
“图像/png”
);
};
});
函数完成（）{
console.log（'done！'）；
安装移除（）；
进程退出（0）；
}

blob.js：

“严格使用”；
const{Readable}=require（'stream'）；
exports.Blob=类Blob{
建造商（零件、选项）{
本._buffer=buffer.concat（部分）；
this.type=options.type；
}
获取大小（）{
返回此值。\u buffer.length；
}
arrayBuffer（）{
返回此。\u缓冲区；
}
流（）{
从（此._缓冲区）返回可读的.from；
}
切片（开始、结束、内容类型）{
const{size}=这个；
让relativeStart，relativeEnd，relativeContentType；
如果（开始==未定义）{
relativeStart=0；
}否则如果（开始<0）{
relativeStart=Math.max（大小+开始，0）；
}否则{
relativeStart=Math.min（开始，大小）；
}
如果（结束===未定义）{
相对尺寸=尺寸；
}否则如果（结束<0）{
relativeEnd=数学最大值（大小+结束，0）；
}否则{
relativeEnd=数学最小值（结束，大小）；
}
if（contentType==未定义）{
relativeContentType=“”；
}否则{
//清理（小写和无效字符检查）在
//建造师
relativeContentType=contentType；
}
常数span=Math.max（relativeEnd-relativeStart，0）；
const slicedBuffer=this.\u buffer.slice(
相对论，
相对启动+span
);
返回新Blob（[slicedBuffer]，{type:relativeContentType}）；
}
};

package.json：

{
“名称”：“p5js测试”，
“版本”：“1.0.0”，
“说明”：“Test p5.js Node.js app.”，
“main”：“/index.js”，
“bin”：{
“p5js测试”：“/index.js”
},
“脚本”：{
“开始”：“node index.js”
},
“作者”：“保罗·惠勒”，
“许可证”：“麻省理工学院”，
“依赖项”：{
“画布”：“^2.7.0”，
“p5”：“^1.3.1”，
“窗口”：“^4.2.7”，
“jsdom”：“^16.5.3”
},
“依赖性”：{}
}

Ow right，我明白了：p5.js必须在浏览器中运行。我一直在读有关Browserify和JSDom的文章。你认为这也是一个解决方案吗？我担心这类东西离我的能力太远了。@MustardShaper我相信Browserify是用于另一个方向的（使用

require

函数编写Node.js风格的代码，然后将其捆绑在浏览器中运行）

jsdom

是

window

包用于其浏览器功能的，它只是将它们捆绑到一个类似

window

的对象中。如果你有特殊要求，请告诉我