사양
- BASE : HTML + Javascript (jQuery)
- API : html2canvas, FileSaver
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<title>이미지캡처</title>
</head>
<body>
<div id="example" style="width: 500px;">
안녕하세요 이미지 캡쳐 예제입니다.<br />
안녕하세요 이미지 캡쳐 예제입니다.<br />
안녕하세요 이미지 캡쳐 예제입니다.<br />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4nsgRjLZntKqK6j0kKjHsYJtQQGsLo27TeDJhy3p85qp9m9WB">
<!-- 구글 상업정 수정 이미지 검색 활용 -->
<!-- 외부 링크는 Access-Control-Allow-Origin 가 해당 서버에서 허용이 되지 않으면 캡쳐 대상제외 -->
</div>
<script type="text/javascript">
function sample() {
var background = document.getElementById('example').style.background;
if(background == "") {
document.getElementById('example').style.background = "#fff";
}
html2canvas(document.getElementById('example'), {
useCORS: true, // 다른사이트의리소스가있을때활성화(그러나...Access-Control-Allow-Origin 필요)
onrendered: function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, 'download.png');
});
// $("#test").html('<img src=' + canvas.toDataURL("image/png") + '>');
}
});
}
</script>
<div id="test"></div>
<button onclick='sample();'>캡처</button>
</body>
</html>PS. 중요 한것이 이미지등의 외부관련 자료 일경우 Access-Control-Allow-Origin 가 발생할 수 있어. IMG에서 나오더라도 html2canvas 호출시에 에러를 발 생 한다. 다시 한번 재생성 하는 구조를 가지고 있는 듯하다.
참조 - 제작자/사
https://html2canvas.hertzen.com/https://github.com/eligrey/FileSaver.js/
참조 - CDN
'촌놈 - 취미로하는개발 > 웹' 카테고리의 다른 글
| [Javascript] 자바스크립트 숫자만 허용 하는 다양한 방법 (0) | 2018.10.22 |
|---|---|
| [Javascript] 자바스크립트 LPAD, RPAD 좌우를 특정문자로 채우기 (0) | 2018.10.19 |
| [서블릿] HttpServletRequest 이용 모바일,타블릿,PC 구분 (0) | 2018.10.12 |
| [SPRING] 모바일(mobile) device 자동 체크하기 (0) | 2018.10.12 |
| [웹툴소개] HTML, 자바스크립트 정리 사이트 (0) | 2018.10.10 |
촌놈 개발자 일기
개발자로서 살아가는 느낌과 정보를 공유 합니다