html2canvas 외부 이미지 로드와 CORS
-
게시물 수정 , 삭제는 로그인 필요
html 페이지에서 버튼을 클릭하면 박스 영역이 캡쳐되어 저장되게 할려고 합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/html2canvas.js"></script>
</head>
<body>
<div id="capture_area">
<p> 캡쳐할 영역 </p>
<img src="image/image.jpg">
<p> </p>
</div>
<button type="button" class="btn_download">이미지 저장하기</button>
<script>
$(function(){
$(".btn_download").click(function(e){
html2canvas(document.getElementById("capture_area")).then(function(canvas) {
var el = document.createElement("a")
el.href = canvas.toDataURL("image/jpeg")
el.download = '이미지.jpg' //다운로드 할 파일명 설정
el.click()
})
})
})
</script>
</body>
</html>
위와 같이 만들었을 때 로컬에서 가지고 온 이미지인 <img src="image/image.jpg"> 가 들어가면
캡쳐가 안되네요 인터넷에 찾아보니 CORS 정책인 보안 문제로 외부 이미지가 있으면 캡쳐가 안된다고 하는데 해결 방법 없을까요? 고수님들 위 코드 수정하여 캡쳐가 되도록 도와주실 분 없을까요?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/html2canvas.js"></script>
</head>
<body>
<div id="capture_area">
<p> 캡쳐할 영역 </p>
<img src="image/image.jpg">
<p> </p>
</div>
<button type="button" class="btn_download">이미지 저장하기</button>
<script>
$(function(){
$(".btn_download").click(function(e){
html2canvas(document.getElementById("capture_area")).then(function(canvas) {
var el = document.createElement("a")
el.href = canvas.toDataURL("image/jpeg")
el.download = '이미지.jpg' //다운로드 할 파일명 설정
el.click()
})
})
})
</script>
</body>
</html>
위와 같이 만들었을 때 로컬에서 가지고 온 이미지인 <img src="image/image.jpg"> 가 들어가면
캡쳐가 안되네요 인터넷에 찾아보니 CORS 정책인 보안 문제로 외부 이미지가 있으면 캡쳐가 안된다고 하는데 해결 방법 없을까요? 고수님들 위 코드 수정하여 캡쳐가 되도록 도와주실 분 없을까요?
#html2canvas 외부 이미지 캡쳐
