我可以使用 fabric.js 来获取没有 HTML 的图像数据吗？

Question

我正在尝试获取 canvas 的像素缓冲区。

canvas 的大小为：64 x 32 像素，白色背景。我添加了一个具有大小、位置和颜色的矩形对象。

最后，当我想得到 'ImageData.data' 时，我没有得到正确的值。

尝试使用此功能时：

let canvasEl = canvas.toCanvasElement();

我收到一条错误消息，提示 .toCanvasElement 不存在。

这是示例代码：

import 'reflect-metadata';
import { fabric } from 'fabric';

describe('Canvas Manipulation', () => {
    describe('Canvas', () => {
        it('Should create canvas with one rectangle field in black and white', () => {
            let canvas = new fabric.Canvas('c');

            // Size of the canvas (64x32 pixels)
            canvas.width = 64;
            canvas.height = 32;
            canvas.backgroundColor = 'white';

            // Create a rectangle with angle=45
            let rect = new fabric.Rect({
                left: 16,
                top: 8,
                fill: 'black',
                width: 16,
                height: 16,
                angle: 45
            });

            canvas.add(rect);

            // You can use fabricJS to generate a B / W or color image of 32x64 and export it as a canvas element.
            let canvasEl = canvas.toCanvasElement();

            // Once you get the canvas element, you can get the imageData from it.
            var imageData = canvasEl.getContext('2d').getImageData(0, 0, canvasEl.width, canvasEl.height);

            // Then you can loop over the image data and build a 1 bit buffer.
            var data = imageData.data;
            var myBuffer = new Array(data.length / 4);

            for (var i = 0; i < data.length; i += 4) {
                myBuffer[i / 4] = data[1] > 128 ? 1 : 0;
            }
        });
    });
});

此致。

Answer 1

根据 docs here fabric.js 是（只是）HTML canvas 元素的包装器。最后浏览器进行绘图。

如果没有浏览器在 DOM 中创建的 HTML canvas 元素，您将无法使用它。

let canvas = new fabric.Canvas('c');

值 'c' 必须是 DOM.

中可用的 HTML canvas 元素的 ID

因此 node.js 中的测试运行不会以这种方式工作。

我可以使用 fabric.js 来获取没有 HTML 的图像数据吗？

Can I use fabric.js to get image data without HTML?

javascript

fabricjs