728x90
반응형
[JavaScript & jQuery] html 특정 영역 드래그로 캡쳐하는 방법 !!
(html2canvas 라이브러리)
라이브러리 공식 링크 -> https://html2canvas.hertzen.com
html2canvas - Screenshots with JavaScript
Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture
html2canvas.hertzen.com
예제 코드
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
// 이미지 캡쳐 시 필요한 라이브러리
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<link rel="stylesheet" type="text/css" href="screenshot.css" />
</head>
<body>
<input type="button" value="캡쳐" id="edit"/>
<div style="width: 80%;">
<img src="다운로드.jfif ">
</div>
<a id="target" style="display: none"></a>
<script>
window.onload = function(){
// 캡쳐 버튼 클릭 이벤트 등록
document.getElementById("edit").addEventListener("click", function(e){
// 마우스 커서 모양 변경 (eidt_cursor 클래스 추가)
document.querySelector("body").classList.add("edit_cursor");
screenshot(e);
});
}
/*
*
*/
function screenshot(e){
var startX, startY;
var height = window.innerHeight;
var width = window.innerWidth;
// 배경을 어둡게 깔아주기 위한 div 객체 생성
var $screenBg = document.createElement("div");
$screenBg.id = "screenshot_background";
$screenBg.style.borderWidth = "0 0 " + height + "px 0";
// 마우스 이동하면서 선택한 영역의 크기를 보여주기 위한 div 객체 생성
var $screenshot = document.createElement("div");
$screenshot.id = "screenshot";
document.querySelector("body").appendChild($screenBg);
document.querySelector("body").appendChild($screenshot);
var selectArea = false;
var body = document.querySelector('body');
// 마우스 누르는 이벤트 함수
var mousedown = function(e) {
e.preventDefault();
selectArea = true;
startX = e.clientX;
startY = e.clientY;
// 이벤트를 실행하면서 이벤트 삭제 (한번만 동작하도록)
body.removeEventListener("mousedown", mousedown);
}
// 마우스 누르는 이벤트 등록
body.addEventListener("mousedown", mousedown);
// 클릭한 마우스 떼는 이벤트 함수
var mouseup = function(e) {
selectArea = false;
// (초기화) 마우스 떼면서 마우스무브 이벤트 삭제
body.removeEventListener("mousemove", mousemove);
// (초기화) 스크린샷을 위해 생성한 객체 삭제
$screenshot.parentNode.removeChild($screenshot);
$screenBg.parentNode.removeChild($screenBg);
var x = e.clientX;
var y = e.clientY;
var top = Math.min(y, startY);
var left = Math.min(x, startX);
var width = Math.max(x, startX) - left;
var height = Math.max(y, startY) - top;
html2canvas(document.body).then(
function(canvas) { //전체 화면 캡쳐
// 선택 영역만큼 crop
var img = canvas.getContext('2d').getImageData(left, top, width, height);
var c = document.createElement("canvas");
c.width = width;
c.height = height;
c.getContext('2d').putImageData(img, 0, 0);
save(c); // crop한 이미지 저장
}
);
body.removeEventListener("mouseup", mouseup);
// 마우스 커서 기본으로 변경
document.querySelector("body").classList.remove("edit_cursor");
}
body.addEventListener("mouseup", mouseup);
// 마우스무브 이벤트 함수
function mousemove(e) {
var x = e.clientX;
var y = e.clientY;
$screenshot.style.left = x;
$screenshot.style.top = y;
if (selectArea) { //캡쳐 영역 선택 그림
var top = Math.min(y, startY);
var right = width - Math.max(x, startX);
var bottom = height - Math.max(y, startY);
var left = Math.min(x, startX);
$screenBg.style.borderWidth = top + 'px ' + right + 'px ' + bottom + 'px ' + left + 'px';
}
}
body.addEventListener("mousemove", mousemove);
// 캡쳐한 이미지 저장
function save(canvas) {
if (navigator.msSaveBlob) {
var blob = canvas.msToBlob();
return navigator.msSaveBlob(blob, '파일명.jpg');
} else {
var el = document.getElementById("target");
el.href = canvas.toDataURL("image/jpeg");
el.download = '파일명.jpg';
el.click();
}
}
}
</script>
</body>
</html>
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 margin, padding 주는 방법 !! (style 주는 방법) (0) | 2023.03.08 |
|---|---|
| [JavaScript] 자바스크립트 join() 함수 사용하는 방법 !! (배열 연결하기) (0) | 2023.03.07 |
| [JavaScript] 자바스크립트로 URL, 주소 복사 하는 방법 !! (0) | 2023.03.02 |
| [JavaScript & jQuery] html 내가 원하는 화면 캡쳐하는 방법 !! (html2canvas 라이브러리) (0) | 2023.03.01 |
| [JavaScript] 자바스크립트로 텍스트(TEXT) 복사 하는 방법 !! (0) | 2023.02.28 |
댓글