웹 화면 캡쳐 html2canvas 사용팁
페이지 정보
작성자 서방님 댓글 0건 조회 669회 작성일 16-07-22 15:37본문
출처 : 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>
외부 링크이면 캡쳐했을때 나오지 않습니다. (보안 때문인듯 합니다.)
IE 8 버전에는 작동안되고, IE11 버전에서는 작동됩니다.
파이어폭스에서도 잘 작동되네요.
html2canvas 예제와의 차이점은..
원하는 엘리먼트만 뽑아서 이미지로 만드는 부분입니다.
html2canvas($("#SavePart"), { //<- 이렇게 div 의 SavePart 아이디 인 엘리먼트를 가져옵니다.
....
<div id="SavePart">
<H> 안녕하세요!!!!</H>
<img src='mobile_175106797126.jpg' />
</div>
[ ▼ 참고 Source ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <html> <HEAD> <TITLE>html2canvas_exam01</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> |
댓글목록
등록된 댓글이 없습니다.
