회사 업무를 하다가 신기한 기능하나를 구현해서 기록하려한다.
"웹페이지를 이미지화 시켜 저장하는 방법"이다.
백단으로 넘어가지 않고 라이브러리를 사용해 스크립트만 사용하여 페이지의 일부분을 저장하는 것이다.
해당 기능을 도와준 친구들은 html2canvas라는 친구다 :D
https://html2canvas.hertzen.com/
html2canvas - Screenshots with JavaScript
Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture
html2canvas.hertzen.com
자바스크립트 코드만 간단히 들고 왔다.
download버튼을 클릭시 section을 모두 이미지화 하고 싶었다.
클릭시 이미지의 경로를 만들어 a태그 생성 및 강제 클릭후 다시 해당 태그를 지웠다. ( saveAs() )
한가지 주의할 점이 있는데 가끔 CSS를 인식 못하는것 같다. 특히 position이 absoulte로 설정되어 있는 친구들..!
정상적으로 출력이 안돼 absolute를 float로 바꿔주는등 모두 수정했었다 :_(
$(document).ready(function(){
// 다운로드
$("#download").click(function() {
$("section").each(function(index) {
index += 1;
html2canvas($(this), {
onrendered: function(canvas) {
//return Canvas2Image.saveAsPNG(canvas);
saveAs(canvas.toDataURL(), index +'_Media.jpg');
}
});
});
});
// 다운로드 링크 생성
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
+ ) 주석처리 되어 있는 부분은 다른 라이브러리인데,
https://hongru.github.io/proj/canvas2image/canvas2image.js
해당 라이브러리는 Canvas2Image.saveAsPNG(canvas); 라는 함수만 실행하면 이미지가 다운받아진다.
제대로 사용해본게 아니나 이름변경이 안되고, 이미지가 정상적으로는 열리나 이미지 파일처럼 안생겼다...
html2canvas에서 제한사항이 하나 있었다.
이것때문에 1시간 반을 날려먹었다^^
크롬기준으로 15000픽셀을 넘어가는 페이지는 텍스트가 제대로 저장되지 않았다.
( 1920x1080 이미지를 저장하는데 이상하게 15번째 다음의 이미지를 제대로 인식 못하도라... )
그래서 쓴 방법 하나는 저장된 이미지를 display : none을 해줬다가 모두 다운 됐으면 다시 보이도록 처리해줬다 :)
'~ 2024.08' 카테고리의 다른 글
[ jQuery ] 컬러피커 플러그인 minicolors (0) | 2020.02.13 |
---|---|
인스타그램 그래프 api 검수 완료😭 (47) | 2020.02.07 |
[ CSS ] 수직정렬 방법! 멤오 멤오 (0) | 2020.01.27 |
[ Node.js ] Node.js 친구 소개 시간 :) (0) | 2020.01.23 |
[개발 일지] 했던일 하고있는 일 정리 (0) | 2020.01.14 |