html2canvas를 사용하여 html 코드를 그림으로 변환하는 방법

이 글은 html2canvas를 사용하여 html 코드를 이미지로 변환하는 방법을 주로 소개합니다. 이제 이를 공유합니다. 도움이 필요한 친구들은 매우 유명한 브라우저 웹 페이지인 html2canvas를 참조할 수 있습니다. 사용하기 쉽고 강력한 스크린샷 촬영을 위한 오픈 소스 라이브러리입니다. 이것은

브라우저 웹 페이지에서 스크린샷을 찍는 데 사용되는 매우 유명한 오픈 소스 라이브러리인

html2canvas를 사용하여 코드를 이미지로 변환합니다.

Use html2canvas

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

실제 사용에는 두 가지 포인트를 지불해야 합니다. 주의 사항:

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

2. 기본으로 생성된 캔버스 이미지는 레티나 장치에서 매우 흐릿합니다. 이 문제를 해결하세요:

var w = $("#code").width();  
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍  
var canvas = document.createElement("canvas");  
    canvas.width = w * 2;  
    canvas.height = h * 2;  
    canvas.style.width = w + "px";  
    canvas.style.height = h + "px";  
var context = canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上  
    context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
canvas: canvas,         
 onrendered: function(canvas) 
{                ...        
  }    
});

html2canvas

1.html 코드 구조

<section class="share_popup" id="html2canvas">  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</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+" />";  
        $(&#39;#html2canvas&#39;).html(pHtml);  
    }  
});

위 내용은 전체 내용입니다 이 기사의 내용이 여러분에게 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

javascript html5 캔버스는 드래그 가능한 중국 지역 지도를 구현합니다.

HTML5 기본 캔버스 그리기: 선 그리기

위 내용은 html2canvas를 사용하여 html 코드를 그림으로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!