액티브X 위에 모달, div 등 html 요소 보이기
문제
-
액티브X를 이용해야하는 object 태그 위에 div 요소들이 올라가면 (드롭다운 메뉴, 모달 팝업 등)
-
object를 hide하지 않는 이상 html element들이 가려진다.
-
$("object").hide(); 등의 방법 말고 이미지는 보이면서 레이어링 할 수 없을까?
--> 그때그때마다 보이려면 동적 화면 캡쳐가 필요하다.
시도한 방법
-
jquery.blockUI.js 를 사용해서 block, unblock으로 액티브X(object)를 가린다
-
object의 wmode를 wrap('div'), unwrap()으로 감싸 transparent나 opaque로 변경한다.
--> 두 방법 다 요소 자체를 hide 하는거랑 똑같은 효과 -
액티브X는 z-index가 최상위라서 그 위에 레이어드 하려면 iframe을 써야 한다
--> 어쩔 수 없을 때만 쓰려고 보류했으나 가장 확실한 방법이라고는 한다. -
어차피 요소를 hide 하고 이벤트도 필요없다 -> 숨긴 뒤 현재 화면의 스크린샷으로 대체하면 어떨까
-
미니 프로젝트를 만들어서 html2canvas 를 사용해본 뒤 본 플젝에 대입
html2canvas - Screenshots with JavaScript
Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture
html2canvas.hertzen.com
-
구글링 해 찾은 코드에서 일부 수정 후 테스트해 본 코드 (참고 출처 : 구스구스님)
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="html2canvas.js"></script>
</head>
<body>
<button onclick="bodyShot()">bodyShot</button>
<button onclick="partShot()">partShot</button>
<div class="container" id='container'>
<!-- 로컬에서 불러온 파일 -->
<img src="test.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- 웹에서 불러온 파일 -->
<!-- <img src="https://www.w3schools.com/html/img_girl.jpg"> -->
<!-- 이미지 캡쳐문제 base 64로 변환 ? -->
</div>
<!-- 결과화면 -->
<canvas id="canvas" width="900" height="600" style="border:1px solid #d3d3d3;"></canvas>
<script>
if (typeof Promise !== "function") {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
}
function bodyShot() {
//전체 스크린 샷
html2canvas(document.body).then( function (canvas) {
//canvas 결과값을 drawImg 함수를 통해서 png의 결과 값
// 캡쳐
drawImg(canvas.toDataURL('image/png'));
//appendchild 부분을 주석을 풀게 되면 body
//document.body.appendChild(canvas);
//특별부록 파일 저장하기 위한 부분.
saveAs(canvas.toDataURL(), 'file-name.png');
}).catch(function (err) { console.log(err); });
}
function partShot() {
//특정부분 스크린샷
html2canvas(document.getElementById("container")).then(function (canvas) {
//jpg 결과값
drawImg(canvas.toDataURL('image/jpg'));
//이미지 저장
saveAs(canvas.toDataURL(), 'file-name.jpg');
}).catch(function (err) { console.log(err); });
}
function drawImg(imgData) {
//console.log(imgData);
return new Promise(
function reslove() {
//내가 결과 값을 그릴 canvas 부분 설정
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); //canvas의 뿌려진 부분 초기화
ctx.clearRect(0, 0, canvas.width, canvas.height);
var imageObj = new Image();
imageObj.onload = function () {
ctx.drawImage(imageObj, 10, 10); //canvas img를 그리겠다.
};
imageObj.src = imgData; //그릴 image데이터를 넣어준다.
},
function reject() { });
}
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri; link.download = filename;
document.body.appendChild(link); link.click();
document.body.removeChild(link); }
else {
window.open(uri);
}
}
</script>
</body>
</html>
중도의 문제
-
promise는 es5에서 안돌아간다 -> 라이브러리 사용
if (typeof Promise !== "function") {
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"><\/script>');
}
-
로컬이미지는 캡쳐되나 웹에서 불러온 이미지는 캡쳐되지 않는다 -- 이미지가 렌더링되지 않는 이유
-
프록시를 사용할 경우 node.js 사용이 필요하다
참고하면 좋을 링크
베스트 캡쳐 자바스크립트 플로그인 12개
12 Best Screen Capture Javascript Plugins and Tutorials - Digital Design Journal
Over the years, there has been a tremendous increase in the use of screen capture tools. For most mo
www.digitaldesignjournal.com
페이지 외부에 있는 이미지를 로드하려는 경우 프록시 사용
niklasvh/html2canvas-proxy-nodejs
Express middleware proxy for html2canvas. Contribute to niklasvh/html2canvas-proxy-nodejs development by creating an account on GitHub.
github.com
html2canvas Download
html2canvas - Screenshots with JavaScript
Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture
html2canvas.hertzen.com
jQuery BlockUI Plugin Download
jQuery BlockUI Plugin
Overview The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1]. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to t
jquery.malsup.com
'Javascript' 카테고리의 다른 글
| 모던 자바스크립트 입문 : 1. 자바스크립트 개요 (0) | 2020.04.04 |
|---|---|
| 모던 자바스크립트 입문 : 0. 서론 및 예제 활용 방법 (0) | 2020.04.04 |
| classList 메소드 (0) | 2020.03.25 |
| 윈도우창의 크기 조절(자바스크립트 , 제이쿼리 방법) (1) | 2020.03.05 |
| [JS] onchange, onkeydown, onkeyup 정리 (0) | 2020.03.03 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
