Как перемещаться по пиксельным цветам кукловода, созданного снимка экрана, рисовать прямоугольник и сохранять в файл

Question

Я новичок в JavaScript / Node.js и обработке изображений и хотел бы взять вывод скриншота кукловода (желательно в памяти), затем иметь возможность проходить цвета каждого пикселя в изображении, а затем обводить прямоугольную границу вокруг определенного координировать изображение (x, y, ширина, высота), затем написать и сохранить изображение с выделением прямоугольника в файл, используя Node.js.

. Что я получаю от кукловода:

возвращает: <Promise<string|Buffer>> Обещание, которое разрешается в буфер или строку base64 (в зависимости от значения кодировки) с захваченным снимком экрана.

Я прочитал, что для этого я могу создать объект холста, используя кукловода но я не уверен в этом решении, особенно для получения цветов пикселей. Я не знаю, должен ли я использовать пакет, такой как PureImage, для этого или другого пакета.

Answer 1

Вот мой код, который ....

1. Обработка снимка экрана base64, сделанного Puppeteer.
2. Создать элемент изображения.
3. Дождитесь события загрузки изображения.
4. установите для снимка экрана атрибут sr c изображения.
5. Создайте холст, не прикрепленный к DOM, и запишите на него изображение .
6. Нанесите два прямоугольника на холст.
7. верните данные холста.

async function (rectangle1, rectangle2, screenshot) {
        let screenshotHighlighted = await driver.page.evaluate(async function (rectangle1, rectangle2, screenshot) {
            let image = new Image();
            let imgLoadPromise = async function(){ return new Promise((resolve, reject) => {
                image.onload = () => {console.log('loaded'); return resolve};
                image.onerror = reject;
            });}
            image.src = 'data:image/png;base64,' + screenshot;
            await imgLoadPromise;
            let canvas = document.createElement("CANVAS");
            let context = canvas.getContext("2d");
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            context.drawImage(image, 0, 0);
            //solid black and dashed red
            context.strokeStyle = "black";
            context.strokeRect(rectangle1.minX, rectangle1.minY, rectangle1.width, rectangle1.height);
            context.setLineDash([5, 10]);
            context.strokeStyle = "red";
            context.strokeRect(rectangle1.minX, rectangle1.minY, rectangle1.width, rectangle1.height);
            context.setLineDash([]);
            //solid black and dashed yellow
            context.strokeStyle = "black";
            context.strokeRect(rectangle2.minX, rectangle2.minY, rectangle2.width, rectangle2.height);
            context.setLineDash([5, 10]);
            context.strokeStyle = "yellow";
            context.strokeRect(rectangle2.minX, rectangle2.minY, rectangle2.width, rectangle2.height);
            return canvas.toDataURL();
        }, rectangle1, rectangle2, screenshot);
        return screenshotHighlighted;
    }

Для сохранения файла в Node.JS

fs.writeFile(path.join(directory,imageFileName),highlightedScreenshot.split(',')[1], 'base64', 
  function(err) {
        if(err) {
                    console.log('ERROR IN SAVING IMAGE');
                    console.log(err);
                } 
            });

Обход пикселей на холсте HTML можно найти в следующем ответе

Получить пиксели от HTML Canvas

Answer 2

Если вам нужно рисовать, самый простой способ - использовать холст. Сначала вам нужно создать холст из вашего изображения, а затем нарисовать желаемую форму. После этого конвертируйте ваш холст обратно в формат img.

Здесь показано, как создать холст из изображения:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

Эта скрипка показывает, как извлечь каждый пиксельный цвет из холста и превратить его из rgb в hex:

https://jsfiddle.net/ourcodeworld/8swevoxo/9/?utm_source=website&utm_medium=embed&utm_campaign=8swevoxo

И, наконец, эта скрипка показывает вам, как преобразовать холст обратно в изображение.

http://jsfiddle.net/robhawkes/9fKV9/

Надеюсь, это поможет вам достаточно, чтобы вы начали.