标签: node-canvas

我安装了cairo和node-canvas.我尝试了一切,但仍然找不到模块.

sudo apt-get install libcairo2-dev
sudo npm install canvas
sudo npm install canvas -g

如果我跑require('canvas'),我得到这个错误:

Error: Cannot find module '../build/Release/canvas'
    at Function._resolveFilename (module.js:332:11)
    at Function._load (module.js:279:25)
    at Module.require (module.js:354:17)
    at require (module.js:370:17)
    at Object.<anonymous> (/home/tomas/node_modules/canvas/lib/bindings.js:2:18)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:32)
    at Function._load (module.js:308:12)
    at Module.require (module.js:354:17)

我用Ubuntu linux

提前致谢.

我有一组动画,我可以在Canvas(fabric.js)或WebGL(three.js)中制作.我需要在服务器端自动记录它们,并通过脚本输出视频文件.

动画包括:

1. 图片
   
2. 视频(带音频)
   
3. 其他动画/效果

在过去的几个月里,我对此进行了很多研究.

结果
1. 使用PhantomJS + FFMPEG
在无头浏览器(PhantomJS)上运行HTML Canvas动画并使用FFMPEG进行录制.这里的问题是PhantomJS既不支持WebGL也不支持Video元素. http://phantomjs.org/supported-web-standards.html

2. 使用Websockets使用DataURL将数据发送回服务器
再次,我们需要在浏览器上运行动画(我们不能这样做,因为我们必须这样做服务器上的一切).

3. 使用node-canvas
这是TJ Holowaychuk的一个库,它允许在Node.js上呈现HTML Canvas.但它有其自身的局限性,而且我还没有真正探索过这个领域.(如果有人可以更多地了解这个图书馆)

如果有人以前做过或者可以指导我有用的地方.
我们需要做的就是使用一些数据来创建动画并将其记录到视频中,服务器端的所有内容.

我需要在nodejs服务器端渲染jpeg图像.我使用以下构建说明安装canvas npm模块:https://github.com/Automattic/node-canvas/wiki/Installation---Windows 我有C:\ libjpeg-turbo \,因为它在手册中提到.如果我做:

npm安装画布

那么这段代码不会启动onload:

 var data = fs.readFileSync("./t.jpg"); var img = new Image();
 img.onload = function () {
     console.log("onload"); 
 }; 
 img.src = data;

(它适用于.png数据).如果我在命令行中指定--with-jpeg,那么MSVC会抱怨缺少libjpeg.h.在这个npm之后删除文件与msvc项目,所以我自己无法设置路径(是否可以关闭此清理？)

那么我怎么能用jpeg支持为windows构建画布呢？在网上找到问题,但没有关于这个主题的答案.

对于我正在研究的项目,我需要从表情符号(理想情况下是Apple表情符号)生成图像文件.我认为它应该是一个相当简单的事情,但是对于我使用的每个工具,我最终都遇到了一堵墙.

我也认为与表情符号集工作,像这样一个在需要的时候,我可以查询.不幸的是,我链接的那个没有Unicode 9.0表情符号,如avocado()虾()或harambe().你知道这样一个最新的集合吗？

代码方面,我尝试过opentype.js,但它不支持.ttc字体,这是我的mac(Apple Color Emoji.ttc)上的表情符号字体的扩展名.我已将字体转换为.ttf,但这也无效:

  var opentype = require('opentype.js');
  opentype.load('./build_scripts/apple_color_emoji.ttf', function (err, font) {
      if (err) {
          alert('Could not load font: ' + err);
      } else {
          console.log("loaded the font",font);

          var Canvas = require('canvas')
            , Image = Canvas.Image
            , canvas = new Canvas(200, 200)
            , ctx = canvas.getContext('2d');
          var path = font.getPath('', 0, 150, 72);
          path.draw(ctx);
          console.log('<img src="' + canvas.toDataURL() + '" />');
      }
  });

结果如下:

我已经尝试过fontkit,它应该能够读取.ttc文件,但是如果我尝试使用Apple Color Emoji字体会引发错误.

  var fontkit = require('fontkit');
  var font = fontkit.openSync('./build_scripts/Apple …

我想知道如何在节点画布上使用自定义字体。

这是我的尝试，但到目前为止还不起作用：

var Canvas = require('canvas')
    , Image = Canvas.Image
    , Font = Canvas.Font
    , path = require('path');

var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf'));

function fontFile(name) {
  return path.join(__dirname, '../fonts', name);
}

function draw() {
  var canvas = new Canvas(100, 100)
    , ctx = canvas.getContext('2d');

  ctx.addFont(gubblebum);
  ctx.font = 'bold 40 gubblebum';
  ctx.fillText('test', 25, 45);

  return canvas;
}

module.exports = draw;

在浏览器中呈现时，字体和大小与默认值保持不变。

字体文件已正确加载。否则，将会抛出异常。

有趣的是，当我执行 ctx.font = 'bold 40 someGibberish'; 时 字体大小应用正确。

通常我使用以下方法将 png 图像导入 Canvas

const image = Canvas.LoadImage('url.png')
const canvas = Canvas.createCanvas(256,256)
const ctx = canvas.getContext('2d')
ctx.drawImage(image,256,256)

但是当我尝试导入 webp 图像时，收到一条错误消息，指出不支持 webp。在研究节点画布的问题时，我发现了这个问题，导入问题似乎已经解决，但我现在不明白如何导入 webp 图像。

我尝试使用问题修复中的Image, ImageFromBuffer(await fetch(url).buffer())但都给出错误。

在我的主电脑上成功安装后，我尝试通过 npm 在我的树莓派上安装画布，但现在我收到一个非常长的错误，我不知道如何修复。
这是完整的错误：

npm ERR! gyp info spawn args ]
npm ERR! Package pixman-1 was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pixman-1.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pixman-1' found
npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed …

对于任何画布专业人士 - 我需要帮助.

我正在使用node-canvas而我正在尝试imageData使用它的getImageData方法.不幸的是它返回:

interface ImageData {
    readonly attribute unsigned long width;
    readonly attribute unsigned long height;
    readonly attribute CanvasPixelArray data;
}

CanvasPixelArray不赞成使用Uint8ClampedArray.

我的问题是:

有没有一种方式getImageData返回Uint8ClampedArray或转换CanvasPixelArray到Uint8ClampedArray？

如果不是这样,也许有人可以指点我在节点中的其他一些画布实现？

非常感谢任何帮助,谢谢你提前!

我正在使用 Node-Canvas 在图像上打印文本，并试图弄清楚如何确保奇怪的字符正确显示，即使主要字体无法显示它们。

从我在网上找到的内容来看，你必须使用registerFont一种可以显示这些字符的字体来依靠，但它似乎不会自动使用它，而且我找不到任何关于如何告诉它确实使用的内容后备字体。

当注册可以显示字符（Code2000）的字体时，它仍然显示为这样（“\xe1\x97\xa9”字符未正确显示）：

（尝试打印HELLO WORLD, I\'M \xe1\x97\xa9c\xc5\x82!）
\n这是我的代码：

//load some fallback fonts for custom characters (arial & code2000 in this case)\ncanvas.registerFont(\'./Assets/Fonts/arial.ttf\', {family: \'Arial\'})\ncanvas.registerFont(\'./Assets/Fonts/code2000.ttf\', {family: \'Code2000\'})\n//load the Uni Sans Heavy custom font\ncanvas.registerFont(\'./Assets/Fonts/Uni_Sans_Heavy.ttf\', {family: \'Uni Sans\'})\nlet cnvs = canvas.createCanvas(740, 260)\nlet ctx = cnvs.getContext(\'2d\')\nctx.fillStyle = "#fff"\nctx.font = \'50px Uni Sans\'\nctx.fillText(`HELLO WORLD, I\'M \xe1\x97\xa9c\xc5\x82!`, 50, 100);\n    \nmessage.channel.send({files: [{ attachment: cnvs.toBuffer() }]}).catch(allerrors)\n

“Code2000”字体肯定可以正确显示字符，所以我认为它会自动回退到该字符，但事实并非如此。\n有没有办法自动使用回退字体？如果没有，我如何告诉它在哪些字符上使用它？

我根据用户使用canvas包发送到 Next.js 中的 API 路由的数据在服务器上生成图像。

它工作得很好，但我无法将项目部署到 Vercel，因为画布依赖性太大（44.9 MB 压缩大小）：

Warning: Max serverless function size of 50 MB compressed or 250 MB uncompressed reached
Serverless Function's page: api/generate-mint-signature-for-character.js
Large Dependencies                         Uncompressed size  Compressed size
application/node_modules/canvas                       172 MB          44.9 MB
application/public/cozy-people-asset-pack            7.37 MB           5.5 MB
application/node_modules/next                        4.42 MB          1.28 MB
Max serverless function size was exceeded for 1 function
Created all serverless functions in: 42.626s
Collected static files (public/, static/, .next/static): 240.385ms
Build Completed in /vercel/output [4m]
Failed to process …