네이버 카페에서 댓글에 달린 사진을 다운받으려면 번거롭게 댓글을 열어서 캡쳐를 해야한다.
아래 코드는 현재 페이지의 모든 댓글 이미지의 src를 추출해서 다운받는 일을 해준다.
*보완해야할 점은 대댓글 다운로드 혹은 작성자의 댓글 다운로드가 안되는건데, 정확히 뭔지는 나중에 알아봐야겠다...잠이온다 새벽2시라~ㅋㅋㅋ
async function start() {
let images = getImages();
for (var i = 0; i < images.length; i++) {
await downloadImage(images[i]);
}
console.log("다운로드가 완료되었습니다.");
}
function getImages() {
let images = Array();
let iframe = document.getElementById('cafe_main');
let imgs = iframe.contentDocument.querySelectorAll(".CommentBox img[alt=첨부사진]");
imgs.forEach(img => {
let url = new URL(img.currentSrc);
url.searchParams.delete('type');
images.push(url.toString());
});
return images;
}
async function downloadImage(url) {
try {
const response = await fetch(url).catch();
const reader = new FileReader();
reader.readAsDataURL(await response.blob());
reader.onloadend = () => {
let a = parent.document.createElement("a");
a.download = url.replace(/^.*[\\\/]/, '');
a.href = reader.result;
parent.document.body.appendChild(a);
a.click();
a.remove();
}
} catch (err) {
// ignore errors
}
}
1. F12를 눌러 Chrome 개발자모드를 연다.
2. Console 탭에 들어가 위 코드를 붙여넣는다.
3. start() 라고 입력한다.
'프로그래밍 > JS, Node.js' 카테고리의 다른 글
[Next.js] 개발 모드에서 useEffect가 두 번 호출될때 (0) | 2022.06.25 |
---|---|
[Next.js] process.env가 undefined로 나올때 (0) | 2022.06.25 |
[Javascript] Canvas 태양, 지구와 달 애니메이션 그리기 (Circle animation) (0) | 2022.01.11 |
DOMContentLoaded와 jQuery document.ready()의 중요한 차이점 (0) | 2021.10.31 |
React JS 개념 잡기 - 빠르게 한 번 훑어보고 싶다면 (0) | 2021.01.08 |