댓글 : 웹 페이지의 일부를 메인 텍스트로 사용하고 원본 웹 페이지를 PDF로 첨부 파일로 변환하고, 보스로 이메일을 보내고, SVG를 캔버스로 변환하여 캔버스를 표시 할 수 없다는 것을 알았으므로 결국 캔버스 태그를 그림 형식으로 다시 변환해야합니다.
최근에 웹 페이지 내용의 일부를 본문에 넣고 원본 웹 페이지를 PDF로 첨부 파일로 변환 한 다음 전자 메일을 보스에게 보내야합니다. 우리는 HTML5에서 보고서 유형 웹 사이트이므로 제어 개발은 캔버스 또는 SVG에 지나지 않습니다. 여기에는 SVG를 사용하는 몇 가지 컨트롤이 있으며 Foxmail 이메일 본문에 SVG를 정상적으로 표시 할 수 없으므로 SVG를 표시 할 캔버스로 변환하는 것을 고려했지만 나중에 캔버스가 정상적으로 표시 될 수 없음을 발견했습니다. 결국, 우리는 캔버스 태그를 다시 이미지 형식으로 변환하는 것 외에는 선택의 여지가 없었으며,이 문제는 마침내이 문제를 해결했습니다. 아래 구현 프로세스를 간단히 소개하겠습니다. 다음은 SVG 태그입니다<div>
<SVG> </svg>
</div>
먼저 SVG 태그와 컨텐츠를 가져와야합니다.
var svghtml = svgcontainer.innerhtml ();
SVG를 Canvas로 변환하려면 Google 플러그인 Canvg가 필요합니다. 공식 웹 사이트에서 다운로드하거나 원격으로 직접 참조 할 수 있습니다.
다음으로 플러그인의 CANVG (CanvasID, SVGHTML) 메소드를 호출하여 캔버스로 변환하십시오. 이 메소드의 첫 번째 매개 변수는 캔버스 태그의 ID이고, 두 번째 매개 변수는 자연스럽게 SVG 태그의 내용입니다. 이런 식으로 SVG는 캔버스로 변환됩니다
그런 다음 캔버스를 그림으로 변환하면 더 쉽습니다
var imgsrc = document.getElementById (canvasid) .todataurl (image/png); // 이것은 이미지를 이미지로 변환하고 이미지의 모든 컨텐츠 데이터를 반환하여 이미지를 표시합니다.
<img src = imgsrc />
이것은 svg-> canvas-> 이미지에서 구현하는 방법입니다. 다른 브라우저가 다른 SVG 및 캔버스를 지원하기 때문에 여전히 매우 유용합니다. 이런 식으로, 결국 이미지 만 사용할 수 있더라도 적어도 우리의 컨트롤은 항상 올바르게 표시 될 수 있습니다.