첫 번째 단계는 html2canvas 라이브러리, http://html2canvas.hertzen.com/의 도움으로 웹 페이지를 Canvas Canvas로 저장하는 것입니다.
html2canvas (document.getElementByid ( "id1"), {onrendered : function (canvas) {document.getElementById ( "id2"). AppendChild (canvas); 캔버스를 생성 한 후 그것을 열 수있는 방법, 플로팅 레이어 등으로 표시 할 수 있습니다. canvas _, // html2canvas 소스 코드를 수정하여 캔버스 ID};참고 : html2canvas ()의 첫 번째 매개 변수는 캔버스가 생성 될 영역입니다. 전체 웹 페이지가 캔버스를 생성하면 document.body입니다. 두 번째 매개 변수에 대한 자세한 내용은 공식 웹 사이트의 다양한 특성을 참조하십시오. 물론 캔버스에 ID 추가와 같은 소스 코드를 수정하여 원하는 속성을 추가 할 수 있습니다.
두 번째 단계는 첫 번째 단계에서 생성 된 캔버스를 그림으로 저장하는 것입니다.
var canvas = docut $ ( "<a>") .attr ( "href", url) .attr ( "download", "img.png"). 부록 ( "body"); 트리거 다운로드 [0] .click (); triggerdownload.remove ();
여기에서는 todataurl () 메소드를 따르십시오. 캔버스를 데이터 형태의 이미지 URL로 변환 할 수 있습니다. 이 URL을 <img/> 태그에 할당하여 그림을 표시하십시오. 코드의 다른 부분은 필요한 다운로드 기능입니다.