html5_html5 튜토리얼 기술의 svg 캔버스와 그림 간의 변환 아이디어 코드

최근에는 웹페이지의 내용 중 일부를 텍스트로 변환하고, 원본 웹페이지를 첨부파일로 PDF로 변환하여 이메일로 상사에게 보내야 하는 필요성이 있었습니다. 이곳은 리포트형 웹사이트이기 때문에 HTML5에서의 컨트롤 개발은 canvas나 svg에 불과합니다. 여기서는 svg를 사용하는 여러 컨트롤이 있고 FoxMail 이메일 본문에 svg가 정상적으로 표시될 수 없기 때문에 svg를 canvas로 변환하는 것을 고려했습니다. 했으나 나중에 캔버스가 정상적으로 표시되지 않는 것을 발견했습니다. 결국 캔버스 태그를 다시 이미지 형식으로 변환하여 문제를 해결했습니다. 다음은 구현 과정을 간략하게 소개합니다. 다음은 svg 태그입니다

코드 복사

코드는 다음과 같습니다.

svg 태그 및 콘텐츠:

var svgHtml = svgContainer.innerHTML()

svg를 캔버스로 변환하려면 공식 웹사이트에서 다운로드할 수 있는 Google의 플러그인 canvg를 사용해야 합니다. 또는 원격으로 직접 인용

다음 단계는 플러그인의 canvg(canvasId,svgHtml) 메서드를 호출하여 캔버스로 변환하는 것입니다. 이 메서드의 첫 번째 매개 변수는 캔버스 태그의 id이고 두 번째 매개 변수는 다음과 같습니다. svg 태그의 내용은 당연히 svg가 캔버스로 변환됩니다.

그런 다음 캔버스를 그림으로 변환하면 더욱 간단해집니다.

var imgSrc = document.getElementById( canvasId).toDataUrl("image/png");//실제로 변환 중입니다. 캔버스가 그림으로 변환되고 그림의 모든 콘텐츠 데이터가 반환됩니다. 그림은 다음과 같이 표시될 수 있습니다.

코드 복사

코드는 다음과 같습니다.

이것은 svg->canvas->image의 구현 방법입니다. 예, 브라우저마다 svg 및 캔버스에 대한 지원이 다르기 때문에 최소한 컨트롤에는 항상 결국에는 이미지만 사용할 수 있더라도 올바르게 표시하는 방법입니다.