[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
안녕하세요 자바 개발을 하고 있는 개발자 입니다
다른 분들이 문의한 부분을 참고하여 카카오맵 api의 맵 캡처가 필요하여
canvas에 이미지 생성 후 img로 변환하기 위해 toDataURL을 사용 시 정상적으로 화면이 나오지 않는 부분이 있느대
이 부분이 CORS 문제 떄문일까요??
코드는 아래와 같이 생성하였습니다
let dataURL;
function captureMap() {
// Get the canvas and its context
let canvas = document.getElementById(‘kakaoCanvas’);
let context = canvas.getContext(‘2d’);
// Set the canvas size to match the map size
canvas.width = mapContainer.clientWidth;
canvas.height = mapContainer.clientHeight;
context.clearRect(0, 0, canvas.width, canvas.height);
console.log("mapContainer.clientWidth : "+mapContainer.clientWidth);
console.log("mapContainer.clientHeight : "+mapContainer.clientHeight);
// Get the map tiles
//let mapTiles = mapContainer.getElementsByTagName('img');
let captureDiv = document.getElementById('mapbx');
/* // Draw each tile onto the canvas
for (let i = 0; i < mapTiles.length; i++) {
let tile = mapTiles[i];
// 이미지의 크기를 조정
let imageUrl = tile.src;
console.log("tile : "+tile);
if (!uniqueTiles.has(imageUrl)) {
// 중복되지 않은 경우에만 이미지 그리기
context.drawImage(tile, tile.style.left.replace('px', ''), tile.style.top.replace('px', ''));
// Set에 이미지 URL 추가
uniqueTiles.add(imageUrl);
}
} */
// captureDiv 내의 텍스트와 이미지를 캔버스에 그리기
drawElement(captureDiv, context, 0, 0);
// 모든 요소를 그린 후에 이미지로 변환
dataURL = canvas.toDataURL('image/png');
console.log("dataURL : "+dataURL);
var downloadLink = document.createElement('a');
downloadLink.href = dataURL;
downloadLink.download = 'canvas_image.png';
downloadLink.click();
//document.getElementById('fixImg').src = dataURL;
html='';
html+='<div class="thum_img">';
html+='<a href="'+dataURL+'" target="_blank">';
html+='<img src="'+dataURL+'"'+'alt="">';
html+='</a>';
/* html+='<input type="hidden" id="fileSize" value="'+fileSizeInMB+'">';
html+='<input type="hidden" id="fileName" value="'+fileName+'">'; */
html+='<button type="button" class="bt_del" onClick="imgDel(this)">';
html+='<span class="blind">파일삭제</span>';
html+='</button>';
html+='</div>';
$("#fixImg").append(html);
// Convert the canvas to a data URL
//let dataURL = canvas.toDataURL('image/png');
//console.log("dataURL : "+dataURL);
// Display the captured map as an image
//document.getElementById('fixImg').src = dataURL;
}
function drawElement(element, ctx, x, y) {
var computedStyle = window.getComputedStyle(element);
var backgroundColor = computedStyle.backgroundColor;
// 배경 색상 설정
if (backgroundColor) {
ctx.fillStyle = backgroundColor;
ctx.fillRect(x, y, element.offsetWidth, element.offsetHeight);
}
// 자식 노드 순회
Array.from(element.childNodes).forEach(function(node) {
if (node.nodeType === Node.TEXT_NODE) {
// 텍스트 노드 그리기
ctx.font = computedStyle.fontSize + ' ' + computedStyle.fontFamily;
ctx.fillStyle = computedStyle.color;
ctx.fillText(node.textContent, x, y + parseInt(computedStyle.fontSize));
y += parseInt(computedStyle.fontSize);
} else if (node.nodeType === Node.ELEMENT_NODE) {
var rect = node.getBoundingClientRect();
drawElement(node, ctx, x + rect.left - element.getBoundingClientRect().left, y + rect.top - element.getBoundingClientRect().top);
}
});
// 이미지 요소 그리기
if (element.tagName === 'IMG') {
let img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y, element.width, element.height);
};
img.src = element.src;
console.log('img.src : '+img.src);
}
}
확인 후 답변 좀 부탁드립니다