Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

캔버스에 HTML 콘텐츠를 로드하는 방법 – SVG foreignObject 활용법

HTML 콘텐츠를 캔버스(canvas)에 로드하고 싶다면 SVG의 <foreignObject> 요소를 활용할 수 있습니다. 이 요소는 SVG 문서 내부에 XHTML 콘텐츠를 삽입할 수 있게 해주며, 이렇게 작성한 SVG를 이미지로 변환한 뒤 캔버스에 그리는 방식으로 동작합니다.

기본 사용 예시

다음은 <foreignObject>를 사용하여 HTML 요소를 SVG 안에 배치하는 기본적인 코드입니다:

<svg xmlns="https://www.w3.org/2000/svg">
  <foreignObject x="0" y="0" width="500" height="500">
    <body xmlns="https://www.w3.org/1999/xhtml">
      <p>DEMO</p>
      <input type="date" />
    </body>
  </foreignObject>
</svg>

동작 원리

<foreignObject>는 SVG 문서 안에서 다른 XML 네임스페이스의 콘텐츠를 렌더링할 수 있도록 허용하는 요소입니다. 위 예제에서는 XHTML 네임스페이스(https://www.w3.org/1999/xhtml)를 명시함으로써, 일반적인 HTML 요소인 <p>나 <input>을 SVG 구조 안에 자연스럽게 배치했습니다.

실제 캔버스에 그리는 절차

작성한 SVG를 캔버스에 렌더링하려면 일반적으로 다음 단계를 거칩니다:

  1. 위와 같은 SVG 마크업을 문자열 형태로 생성합니다.
  2. Blob 객체로 감싼 뒤 URL.createObjectURL() 또는 Data URL로 변환합니다.
  3. 새로운 Image 객체의 src에 해당 URL을 할당하여 로드합니다.
  4. 이미지 로드가 완료되면 ctx.drawImage() 메서드를 호출해 캔버스에 그립니다.

주의 사항

이 방식을 사용할 때는 몇 가지 유의해야 할 점이 있습니다. 먼저, 보안 정책상 외부 리소스(외부 이미지, 웹폰트 등)가 포함되면 캔버스가 오염(tainted)되어 toDataURL() 같은 API 사용이 제한될 수 있습니다. 또한 SVG를 문자열로 직렬화할 때는 CSS 스타일이 인라인 형태로 포함되어야 의도대로 렌더링됩니다.