html2canvas를 사용하여 html 코드를 이미지로 변환하는 방법

html2canvas는 브라우저 웹 페이지에서 스크린샷을 찍을 수 있는 매우 유명한 오픈 소스 라이브러리입니다. 사용하기 쉽고 강력한 기능을 갖추고 있습니다.

html2canvas의 사용은 매우 간단합니다. DOM 요소를 전달한 다음 콜백을 통해 캔버스를 가져오는 것만큼 간단합니다.

1.html2canvas는 요소의 실제 스타일을 구문 분석하여 캔버스 이미지 콘텐츠를 생성하므로 요소의 실제 레이아웃 및 시각적 표시에 대한 요구 사항이 있습니다. 전체 스크린샷을 찍으려면 문서 흐름에서 요소를 분리하는 것이 가장 좋습니다(예: 위치:절대).

2. 기본적으로 생성된 캔버스 이미지는 Retina 장치에서 매우 흐릿합니다. 이를 2x 이미지로 처리하면 이 문제를 해결할 수 있습니다.

 var w = $(#code).width(); var h = $(#code).height();//캔버스의 너비와 높이를 컨테이너 너비와 높이의 2배로 설정 var canvas = document .createElement(캔버스); 캔버스.폭 = h * 2; 캔버스.스타일.폭 = h + px; canvas.getContext(2d);//그런 다음 캔버스 크기를 조정하고 이미지를 두 배로 늘려 캔버스에 그립니다. context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( 캔버스) { ... } });

1.html 코드 구조

 <section class=share_popup id=html2canvas> <p>html2canvas의 사용은 DOM 요소를 전달한 다음 콜백을 통해 캔버스를 가져오는 것처럼 매우 간단합니다.</p> <p><img src=1.jpg >< /p> <p>html2canvas의 사용은 DOM 요소를 전달한 다음 콜백을 통해 캔버스를 가져오는 것처럼 매우 간단합니다.</p> </section>

2.js 코드 구조

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendered: function (canvas) { var image = canvas.toDataURL(image/png) ; var pHtml = <img src=+image+ /> $('#html2canvas').html(pHtml) } });

위 내용은 html2canvas를 사용하여 html 코드를 이미지로 변환하는 방법에 대한 편집자의 소개입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!