标签: node-canvas

我想在 Node.JS 中生成一些图像，将它们编译成视频并将它们流式传输到 youtube。为了生成图像，我使用节点画布模块。这听起来很简单，但我想连续生成图像，并实时传输结果。我对这整件事很陌生，在阅读了互联网上的大量资源后，我正在考虑做的是：

1. 使用 打开 ffmpeg spawn('ffmpeg', ...args)，将输出设置到目标 rtmp 服务器
2. 在画布中生成图像
3. 将canvas的内容转换为buffer，通过stdin写入到ffmpeg进程中
4. 在 YouTube 上欣赏结果

但事情并没有那么简单，不是吗？我看到人们分享他们的代码，涉及在浏览器上运行的客户端 JS，但我希望它是一个 Node 应用程序，这样我就可以从远程 VPS 运行它。有没有一种方法可以让我在不使用浏览器中的 p5 之类的内容并捕获窗口来重新传输它的情况下执行此操作？我的思维过程是否足够？现在我并不真正关心性能/资源使用情况。提前致谢。

编辑：

我花了一点时间，但无法让它工作......这是我的代码：

const { spawn } = require('child_process');
const { createCanvas } = require('canvas');
const fs = require('fs');


const canvas = createCanvas(1920, 1080);
const ctx = canvas.getContext('2d');
const ffmpeg = spawn("ffmpeg",
    ["-re", "-f", "png_pipe", "-vcodec", "png", "-i", "pipe:0", "-vcodec", "h264", "-re", "-f", "flv", "rtmp://a.rtmp.youtube.com/live2/key-i-think"],
    { stdio: 'pipe' })

const randomColor = (depth) => Math.floor(Math.random() * …

我在nodejs上有一个函数，可以从许多图像中生成图像，然后从中生成pdf文件。我只尝试一张图片，但我需要添加更多图片，但这似乎不起作用

function HelperHandler() {
  this.pdf = function(req, res, next) {
    var doc = new PDFDocument;
    mergeImages(function(err, image) {
      if (err)
        return res.json(err);

      doc.image(image, 100, 100);
      doc.output(function(string) {
        res.contentType = "application/pdf";
        res.send(string);
      });
    })
  }
}

var mergeImages = function(callback) {
  var Canvas = require("canvas")
    , fs     = require("fs");

  fs.readFile(global.root_path + "/images/bg.jpg", function(err, data) {
    if (err)
      callback("error loading image");
    else {
      var canvas = new Canvas(408, 939)
        , img    = new Canvas.Image(data);
      ctx = canvas.getContext("2d");
      img.onload = function() {
        ctx.drawImage(img, …

所以我想创建一个gif并添加一个图像作为一个框架.我正在使用gifencoder.我已经看过这些例子,它很容易添加颜色,txt等,但我无法弄清楚如何对图像做同样的事情.我需要像png文件流这样的东西吗？

例如:来自网站的彩色边框

let canvas = new Canvas(width, height);
var ctx = canvas.getContext('2d');
red rectangle
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 320, 240);
encoder.addFrame(ctx);

编辑:

我尝试做类似下面的事情,当帧出现在我的日志上时,想要的帧没有添加,没有错误.在有人建议转换为base64之前,png/gif这个模块不能添加这样的框架,如果你有另一个想法,那么请继续这样说.

fs.createReadStream('test.gif')
.pipe(new GIFDecoder) //gif-stream
.pipe(concat(function(frames) { //concat-frames
    console.log(frames);
    for (var i=0; i<frames.length; i++) {
        encoder.addFrame(frames[i]);
    }
}));

无论我多么努力,我只得到一个黑色的GIF,仅此而已.

编辑2:

好吧,所以我试图从gif框架中添加的原因是因为它看起来更简单.下面是我尝试获取图像,将其转换为RGBA所取得的进展(我注意到模块接受rgba格式,而不是rgb,也许这就是为什么它总是黑色)然后添加帧.如果我有数据,添加框架非常简单,因为我只是调用一个方法并将数据推入,所以我将把它留下来.

var request = require('request').defaults({ encoding: null });

request.get('https://upload.wikimedia.org/wikipedia/commons/0/01/Quinlingpandabearr.jpg', function (error, response, body) {
    if (!error && response.statusCode == 200) {
        var img = new Canvas(105, 159);        
        var context = img.getContext('2d');
        img.src = "data:" + response.headers["content-type"] + …

我正在尝试在 docker 中的 Alpine 上安装节点画布（https://github.com/Automattic/node-canvas）。

这些是（部分）我的 Dockerfile：

# Use node/alpine image for final build
FROM keymetrics/pm2:latest-alpine as app

# install dependencies for canvas
RUN apk --no-cache --virtual .build-deps add \
        python \
        make \
        g++ \
        gcc \
    && apk --no-cache --virtual .canvas-build-deps add \
        build-base \
        cairo-dev \
        jpeg-dev \
        pango-dev \
        giflib-dev \
        pixman-dev \
        pangomm-dev \
        libjpeg-turbo-dev \
        freetype-dev \
    && apk --no-cache add \
        pixman \
        cairo \
        pango \
        giflib
RUN apk add …

所以我试图获取用户个人资料上的“关于我”部分，然后将其放在节点画布上，但在不和谐的js上找不到文档，所以只是检查它是否可能

我的个人资料画布代码：

        const Discord = require('discord.js')
        const Canvas = require('canvas');
        const client = new Discord.Client({
            intents: ['DIRECT_MESSAGES', 'GUILD_MESSAGES', 'GUILDS', 'GUILD_MEMBERS', 'GUILD_MESSAGE_REACTIONS', 'GUILD_VOICE_STATES', 'GUILD_PRESENCES']
        });
        
        const applyText = (canvas, text) => {
        const context = canvas.getContext('2d');
        let fontSize = 70;
    
        do {
            context.font = `${fontSize -= 10}px sans-serif`;
        } while (context.measureText(text).width > canvas.width - 300);
        return context.font;
    };

        client.on('messageCreate', async message => {
            if (message.author.bot) return;
            if (message.channel.type === 'dm') return;
            if (!prefix[message.guild.id]) return;
            if (!langs[message.author.id]) return;
            if (message.content.toLowerCase().startsWith(prefix[message.guild.id].custprefix + 'profile')) …

我创建了以下图像作为fabricjs-json：

json 如下所示：

{
    "version": "5.2.1",
    "objects": [
        {
            "type": "circle",
            "version": "5.2.1",
            "originX": "center",
            "originY": "center",
            "left": "100",
            "top": "100",
            "width": "60",
            "height": "60",
            "fill": "#e53e3e",
            "name": "a",
            "radius": "30",
            "stroke": null,
            "padding": "0"
        },
        {
            "type": "triangle",
            "version": "5.2.1",
            "originX": "center",
            "originY": "center",
            "left": "80",
            "top": "229.13",
            "fill": "#e0da2e",
            "name": "b",
            "height": "100",
            "width": "100",
            "stroke": null,
            "padding": "0"
        },
        {
            "type": "rect",
            "version": "5.2.1",
            "originX": "center",
            "originY": "center",
            "left": "303.02",
            "top": "69.96",
            "width": "50",
            "height": "50",
            "fill": …

我想将文本放在画布上居中。水平方向似乎不错，但垂直方向仍然是一个问题：我不知道如何以编程方式执行此操作。

我以前可以用 1 行来完成此操作，但现在我想让它适用于多行文本。

现在的图像如下所示：

文字应该定位得更高一点，还是我错了？

这是代码：

const fs = require('fs')
const {  createCanvas } = require('canvas')


const width = 2000;
const height = 2000;

const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

context.fillStyle = '#edf4ff'
context.fillRect(0, 0, width, height)


context.textAlign = 'center'
context.textBaseline = 'middle';
context.fillStyle = '#002763'


const fontSizeUsed = drawMultilineText(
    context,
    "This is yet another test",
    {
        rect: {
            x: 1000,
            y: 0,
            width: 2000,
            height: 2000 
        },
        font: 'Arial',
        verbose: true,
        lineHeight: 1,
        minFontSize: 100, …

我在Nodejs 中使用FabricJS模块。我正在尝试导出一个画布，但它不会（给我带来了困难）。我得到的只是base64 png数据。jpeg

data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t.....