Puppeteer의 픽셀 색상을 가로 질러 스크린 샷 이미지를 생성하고 직사각형을 그리고 파일에 저장하는 방법

debugcn 에 게시 Dev

이브라힘

저는 JavaScript / Node.js 및 이미지 처리를 처음 사용하며 인형극 스크린 샷 (가급적이면 메모리)의 출력을 가져 와서 이미지의 각 픽셀의 색상을 탐색 한 다음 특정 좌표 주위에 사각형 테두리를 긋고 싶습니다. 이미지 (x, y, 너비, 높이)를 입력 한 다음 Node.js를 사용하여 사각형 강조 표시가있는 이미지를 파일에 저장합니다.

내가 인형극에서 얻는 것은

반환 값 : <Promise<string|Buffer>>캡처 된 스크린 샷과 함께 버퍼 또는 base64 문자열 (인코딩 값에 따라 다름)으로 확인되는 Promise.

이 작업을 수행하기 위해 인형을 사용하여 캔버스 개체를 만들 수 있다고 읽었지만 특히 픽셀 색상을 검색하는이 솔루션에 대해 잘 모르겠습니다. 이 패키지 나 다른 패키지에 PureImage와 같은 패키지를 사용해야하는지 모르겠습니다.

이브라힘

여기에 내 코드가 있습니다 ....

Puppeteer가 찍은 base64 스크린 샷을 처리합니다.
이미지 요소를 만듭니다.
이미지 온로드 이벤트를 기다립니다.
이미지의 src 속성을 스크린 샷으로 설정합니다.
DOM에 첨부되지 않은 캔버스를 만들고 이미지를 작성합니다.
캔버스에 두 개의 직사각형을 그립니다.
캔버스 데이터를 반환합니다.

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 캔버스에서 픽셀 가져 오기

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사