Javascript 我可以使用fabric.js在没有HTML的情况下获取图像数据吗？

我正在尝试获取画布的像素缓冲区

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

最后，当我想要获取“ImageData.data”时，我没有得到正确的值

尝试使用此选项时：

let canvasEl = canvas.toCanvasElement();

我收到一条错误消息，

.tocanvassement

不存在

这是示例代码：

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;
            }
        });
    });
});

导入“反映元数据”；
从“fabric”导入{fabric}；
描述（'画布操作'，（）=>{
描述（'Canvas'，（）=>{
它（'应该用一个黑白矩形字段创建画布'，（）=>{
让canvas=newfabric.canvas（'c'）；
//画布的大小（64x32像素）
画布宽度=64；
高度=32；
canvas.backgroundColor='白色'；
//创建角度为45的矩形
设rect=new fabric.rect({
左：16，
前8名，
填充：“黑色”，
宽度：16，
身高：16，
角度：45
});
canvas.add（rect）；
//您可以使用fabricJS生成32x64的黑白或彩色图像，并将其导出为画布元素。
让canvasEl=canvas.toCanvasElement（）；
//一旦获得canvas元素，就可以从中获得imageData。
var imageData=canvasEl.getContext（'2d'）.getImageData（0,0，canvasEl.width，canvasEl.height）；
//然后，您可以在图像数据上循环并构建一个1位缓冲区。
var数据=imageData.data；
var myBuffer=新数组（data.length/4）；
对于（变量i=0；i128？1:0；
}
});
});
});

致以最诚挚的问候。

根据fabric.js只是HTML画布元素的包装。最后，浏览器将完成图形的绘制

如果没有浏览器在DOM中创建的HTML画布元素，则无法使用它

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

值

'c'

必须是DOM中可用的HTML画布元素的ID

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

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

根据fabric.js只是HTML画布元素的包装。最后，浏览器将完成图形的绘制

如果没有浏览器在DOM中创建的HTML画布元素，则无法使用它

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

值

'c'

必须是DOM中可用的HTML画布元素的ID

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

---

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

您使用的是什么版本的fabric？“fabric”：“4.1.0”首先，我将fabricjs javascript用于typescript项目中可能是.d.ts缺失或不是最新的。其次，我没有使用任何html页面来呈现画布。我只是在创建对象，对它们进行分组，监听事件，最后通过处理提取位图数组，发送到LCD显示器。向你问好但是你是在浏览器中运行吗？亲爱的，一点也不。我的库只使用了一个typescript文件。最佳评价您使用的是哪个版本的fabric？“fabric”：“4.1.0”首先，我正在将fabricjs javascript用于一个typescript项目中可能是.d.ts缺失或不是最新的。其次，我没有使用任何html页面来呈现画布。我只是在创建对象，对它们进行分组，监听事件，最后通过处理提取位图数组，发送到LCD显示器。向你问好但是你是在浏览器中运行吗？亲爱的，一点也不。我的库只使用了一个typescript文件。最后，我得到了fabricjs存储库所有者的确认。最后，我得到了fabricjs存储库所有者的确认。