Могу ли я использовать fabric.js чтобы получить данные изображения без HTML?

#javascript #fabricjs

Вопрос:

Я пытаюсь получить пиксельный буфер холста.

Размер холста: 64 x 32 пикселя с белым фоном. Я добавляю объект rectangle с размером, положением и цветом.

Наконец, когда я хотел бы получить ‘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;
            }
        });
    });
});

С наилучшими пожеланиями.

1. на какой версии fabric вы работаете?

2. «fabric»: «4.1.0»

3. Во-первых, я использую fabricjs javascript в проекте typescript. — Возможно, файл .d.ts отсутствует или не обновлен. Во-вторых, я не использую какую-либо HTML-страницу для рендеринга холста. Просто я создаю объекты, группирую их, прослушиваю событие и, наконец, извлекаю массив растровых изображений с обработкой для отправки на ЖК-дисплей. С наилучшими пожеланиями, Юсеф

4. Но вы работаете в браузере?

5. Дорогой, совсем нет. Я использую только файл typescript для своей библиотеки. С наилучшими пожеланиями

Ответ №1:

Согласно документам здесь fabric.js это (просто) оболочка для элементов HTML canvas. В конце браузер выполняет рисование.

Вы не можете использовать его без элемента HTML canvas, который создается браузером в DOM.

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

Значением 'c' должен быть идентификатор элемента HTML canvas, который доступен в DOM.

Поэтому тест, выполняемый в node.js так не получится.