canvas - Electron 和createPNGStream

标签 canvas electron fabricjs

我无法让createPngstream与fabricjs在 Electron 环境中工作

嗨,我正在使用布料生成静态横幅
仅使用nodejs即可正常工作。

现在我的同事也想这样做,所以我想建立一个
Electron 应用程序供他使用。但是现在当我尝试运行 Electron 代码时会出现此错误

未捕获的TypeError:canvas.createPNGStream不是函数

如果我使用 Canvas 白色织物,我可以在 Electron 中使用createPNGStream吗?
我该怎么做才能解决此问题?

const fs = require('fs')
const fabric = require('fabric').fabric;

let canvas  = new fabric.Canvas(null, { width: 500, height: 500 });

fabric.Image.fromURL(__dirname+'/lime-cat.jpg', function(img) {
  img.set({left: 0, top: 0});
  canvas.add(img);
});
canvas.renderAll();

let tagline = new fabric.Textbox(tagres, {
fontSize: 50,
width:iWidth,
fixedWidth: iWidth,
fill: '#ffffff',
textAlign:'center',
fontFamily:'font90557',
left: canvas.width/2, top: canvas.height/2, originX: 'center', originY: 'top',
lineHeight:0.8,
shadow: 'rgba(0,0,0,1) 4px 4px 4px'      
});  

canvas.add(tagline);
canvas.renderAll();

const out = fs.createWriteStream(__dirname + '/test.png')
const stream = canvas.createPNGStream()
stream.pipe(out)
out.on('finish', () =>  console.log('The PNG file was created.'))

最佳答案

我只想将此添加为评论...但是显然我需要回答?! (一些非常奇怪的SO规则!)
我很确定 createPNGStream 是 Canvas 的nodejs方法。
https://www.npmjs.com/package/canvas#canvascreatepngstream
也引自相关部分;
http://fabricjs.com/fabric-intro-part-4

All of this simply creates Fabric canvas and renders text object onto it. Now, how to create an image of whatever is rendered on canvas? Using createPNGStream method available right on the canvas instance. createPNGStream returns Node's stream object, and can then be output into an image file using on('data'), and writing into the stream corresponding to an image file (fs.createWriteStream()).

fabric.Canvas#createPNGStream is one of the methods specific to Node. Everything else works the same — you can still create objects as you usually would, add them on canvas, modify, render, and so on.


解决方案似乎是在服务器上运行node.js,node-canvas和Fabric。指令http://fabricjs.com/fabric-intro-part-4中概述了说明,Node.js上标题为的Fabric部分

关于canvas - Electron 和createPNGStream,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57878269/

相关文章:

javascript - loadPixels() 不适用于 p5.js

java - 为什么我的 Canvas 不起作用?

reactjs - 在其他计算机上使用 native 模块执行 Electron 应用程序时出现 JS 错误

fabricjs - 仅显示一些控件

javascript - Fabric.js 对象在以编程方式更改属性后消失

javascript - Canvas 已被跨源数据本地镜像污染

javascript - 在 Electron 应用程序最佳实践中查询外部数据库?

javascript - 使用npm csv-writer写入csv文件不起作用,但没有出现错误消息

javascript - FabricJS:大网格对象模糊

javascript - 如何在fabricJS中通过鼠标选择覆盖的对象?