- 정보공유
[기타] 자바스크립트를 이용해서 버튼 클릭시 이미지로 저장하는 방법
<section id="capture">
내용
</section>
<button id="downloadBtn">이미지로 저장</button>
<script type="text/javascript">
document.getElementById('downloadBtn').addEventListener('click', async () => {
const element = document.getElementById('capture');
if (isMobile()){
alert("모바일에서는 이미지 다운로드 기능을 지원하지 않습니다. PC용 Chrome 또는 Edge에서 실행하세요.");
}
html2canvas(element).then(async canvas => {
const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
if ('showSaveFilePicker' in window) {
try {
const handle = await window.showSaveFilePicker({
suggestedName: 'screenshot.png',
types: [{
description: 'PNG Image',
accept: { 'image/png': ['.png'] },
}]
});
const writable = await handle.createWritable();
await writable.write(blob);
await writable.close();
alert("이미지가 저장되었습니다.");
} catch (err) {
console.error("파일 저장 실패:", err);
}
} else {
alert("이 브라우저는 로컬 저장을 지원하지 않습니다. PC용 Chrome 또는 Edge에서 실행하세요.");
}
});
});
function isMobile(){ //모바일, pc 판별
var filter = "win16|win32|win64|mac|macintel";
if (navigator.platform ) {
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
return true;
} else {
//PC
return false;
}
}
}
</script>