▲

Skia Canvas: 노드용 HTML Canvas 드로잉 API의 브라우저리스 구현

 (skia-canvas.org)
4P by GN⁺ 2024-12-04 | ★ favorite | 댓글 1개

소개

  • Skia Canvas는 Node.js에서 HTML Canvas 드로잉 API를 브라우저 없이 구현한 라이브러리임.
  • Google의 Skia 그래픽 엔진을 기반으로 하여 Chrome의 <canvas> 요소와 유사한 결과를 생성함.
  • 데스크탑과 서버에서 하드웨어 가속 그래픽을 렌더링하거나 다양한 이미지 포맷을 출력하는 데 적합함.

주요 기능

  • GPU에서 렌더링이 이루어져 빠르고 컴팩트하며, Rust와 C++로 작성된 네이티브 코드로 작업을 처리함.
  • OS 네이티브 그래픽 파이프라인을 사용하여 창에 렌더링할 수 있으며 브라우저와 유사한 UI 이벤트 프레임워크를 제공함.
  • 래스터(JPEG, PNG, WEBP) 및 벡터(PDF, SVG) 포맷으로 이미지를 생성할 수 있음.
  • 이미지를 파일로 저장하거나 버퍼로 반환하거나 dataURL 문자열로 인코딩할 수 있음.
  • 비동기 렌더링 및 파일 I/O를 위해 사용자 구성 가능한 워커 풀에서 네이티브 스레드를 사용함.
  • 주어진 캔버스에서 여러 '페이지'를 생성하고 이를 단일 다중 페이지 PDF 또는 여러 파일로 저장된 이미지 시퀀스로 출력할 수 있음.
  • 효율적인 불리언 연산이나 점 대 점 보간을 사용하여 베지어 경로를 단순화, 둔화, 결합, 발췌 및 원자화할 수 있음.
  • 스케일링, 회전 및 변환 외에도 3D 원근 변환을 제공함.
  • 비트맵 기반 패턴 외에도 벡터 기반 텍스처로 도형을 채울 수 있으며 사용자 정의 마커로 선을 그릴 수 있음.
  • CSS 필터 이미지 처리 연산자를 완벽하게 지원함.
  • 다중 라인, 단어 줄 바꿈 텍스트, 라인별 텍스트 메트릭스, 소문자, 합자 및 기타 오픈타입 기능을 포함한 풍부한 타이포그래피 제어를 제공함.
  • 비시스템 폰트를 로컬 파일에서 로드하여 사용할 수 있음.

예제 사용법

이미지 파일 생성

  • Canvas를 사용하여 400x400 크기의 캔버스를 생성하고, 2D 컨텍스트를 가져옴.
  • createConicGradient를 사용하여 색상 그라데이션을 추가하고 사각형을 그리는 예제 제공.
  • 비동기 함수 render를 통해 이미지를 저장하거나 버퍼로 변환하거나 문자열로 임베드하는 방법 설명.

다중 페이지 시퀀스

  • 여러 색상의 페이지를 생성하고 이를 다중 페이지 PDF 파일로 저장하거나 개별 이미지 파일로 저장하는 방법 설명.

창에 렌더링

  • Window를 사용하여 300x300 크기의 창을 생성하고, draw 이벤트를 통해 원을 그리는 방법 설명.

함께 보면 좋은 글 β

▲
GN⁺ 2024-12-04  [-]
Hacker News 의견

  • https://windowjs.org는 Skia를 감싸고 Canvas API로 노출하며, v8을 내장하여 작은 런타임을 제공하는 프로젝트임

    • 3년 전 처음으로 오픈 소스로 출시된 프로젝트임
    • WebGL, 오디오 등을 노출하여 데스크톱에서 JavaScript 기반 게임을 위한 플랫폼으로 만들 계획이 있었음
    • 다른 프로젝트와 삶의 변화로 개발이 중단되었으나, Canvas를 브라우저 외부에서도 사용할 수 있게 하는 이 프로젝트를 보게 되어 기쁨

  • Node와 호환되는 Canvas 구현에 관심이 있다면 다음을 참고할 수 있음

    • canvaskit-wasm은 Skia 프로젝트에서 제공하며, GPU 가속은 지원하지 않는 것으로 보임
    • @napi-rs/canvas는 가장 빠른 바인딩을 제공함
    • node-canvas는 Skia 대신 Cairo를 사용함

  • 이러한 라이브러리의 사용 목적에 대한 궁금증이 있음

    • 데스크톱에서는 더 나은 네이티브 라이브러리가 있을 것이라는 의견이 있음

  • Skia는 Node를 지원하는 WASM 빌드인 CanvasKit을 제공하며, 이 모듈은 Rust 바인딩임

    • 각 접근 방식의 장단점에 대한 관심이 있음

  • Rust crate의 래퍼와 유사한지에 대한 질문이 있음

  • Node/Web을 위한 유사한 것을 만들었으며, 완벽하지는 않지만 좋음

    • SDL을 사용하여 OS에서 창을 생성할 수 있음
    • 문서와 예제를 확인할 수 있음

  • 이전 시도들은 Node-Gyp 설치가 필요하여 어려움이 있었음

    • 이 프로젝트를 오랫동안 기다려왔음

  • 단순한 렌더링 API 이상임

    • OS 네이티브 그래픽 파이프라인을 사용하여 창에 렌더링할 수 있으며 브라우저와 유사한 UI 이벤트 프레임워크를 제공함
    • WebGPU 지원을 위해 wgpu를 추가하고 WebGL 지원을 위해 ANGLE을 추가할 수 있음

  • https://malmal.io에서 서버에서 그려진 타일을 렌더링하는 데 사용하며, 매우 잘 작동함

  • MapLibre를 서버 측에서 렌더링하는 데 도움이 될지 궁금함

    • 지도 썸네일을 제공하기 위해
답변달기