웹 화면 캡쳐 html2canvas 사용팁 > php

웹 화면 캡쳐 html2canvas 사용팁

작성일 16-07-22 15:37

페이지 정보

작성자서방님 조회 1,055회 댓글 0건

본문

출처 : http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=79712

웹페이지 안의 이미지들이
외부 링크이면 캡쳐했을때 나오지 않습니다. (보안 때문인듯 합니다.)

IE 8 버전에는 작동안되고, IE11 버전에서는 작동됩니다.
파이어폭스에서도 잘 작동되네요.

html2canvas 예제와의 차이점은..

원하는 엘리먼트만 뽑아서 이미지로 만드는 부분입니다.

html2canvas($("#SavePart"), { //<- 이렇게 div 의 SavePart 아이디 인 엘리먼트를 가져옵니다.
....
<div id="SavePart">
<H> 안녕하세요!!!!</H>
<img src='mobile_175106797126.jpg' />
</div>

[ ▼ 참고 Source ]

<html>
 <HEAD>
  <TITLE>html2canvas_exam01</TITLE>
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
  
<SCRIPT LANGUAGE="JavaScript">
<!--
function  html2img(){
  var canvas ="";
  html2canvas($("#SavePart"), {
  onrendered: function(canvas) {
  // canvas is the final rendered <canvas> element
   document.getElementById("theimage").src = canvas.toDataURL();
     Canvas2Image.saveAsPNG(canvas);
  }
  });
  //alert(document.getElementById("SavePart").innerHTML);
}
//-->
</SCRIPT>
 
 </HEAD>
 
 <BODY>
   
<div id="SavePart">
<H> 안녕하세요!!!!</H>
<img src='mobile_175106797126.jpg' />
</div>
<FORM>
  <INPUT type='BUTTON' value='버튼' onclick='html2img()'> <!-- 버튼 클릭 이벤트-->
</FORM>
<image id="theimage"></image>
 </BODY>
</HTML>

댓글목록

등록된 댓글이 없습니다.