====== jsPDF 라이브러이 이미지 처리 가이드 ======
===== 예시 =====
템플릿 위치: /HTML5/OSS/jspdf_image
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/jspdf_image.xml|jspdf_image.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/jspdf_image.js|jspdf_image.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/jspdf_image|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// "1. loadjs" 버튼 이벤트
function btn_loadjs_on_click(objInst)
{
// 라이브러리 로드 (프로젝트 환경에 따라 경로를 달라질 수 있음)
screen.loadjs("./ext/lib/jspdf.umd.min.js");
}
// "2. getcomponentimagedata" 버튼 이벤트
function btn_getcomponentimagedata_on_click(objInst)
{
// nImageType 파라미터는 콜백 함수에 전달된 이미지 데이터 유형을 지정한다.
// 0이 경우, Data URL 형식으로 전달되고,
// 1인 경우, 이미지 데이터만 BASE64로 인코딩된 형태로 전달된다.
var nImageType = 0;
// nCaptureType 파라미터를 1로 지정 시 화면에 보이는 데로 캡처한다.
// 전용브라우저 환경에서만 동작하는 옵션이다.
// 크로미움에서 제공하는 기능을 통해 캡쳐하는 방식으로 화면 깜빡임이 발생한다.
// nCaptureType 파라미터를 2로 지정 시 화면에 보이는 데로 캡처한다.
// 전용브라우저 환경에서만 동작하는 옵션이다.
// 데스크톱을 기준으로 캡쳐하는 방식으로 작업관리자창에 가려진 경우 정상적으로 캡쳐되지 않을 수 있다.
var nCaptureType = 2;
factory.getcomponentimagedata(screen, this.grdList, "", screen,
"on_imagedata_complete", this.grdList.getname(), nImageType, nCaptureType);
}
/**
* factory.getcomponentimagedata API 콜백 함수
* @param image_data 이미지 데이터 또는 null (오류 발생시)
* @param image_data_name API 호출시 지정한 이미지 이름 (strImageName 파라미터)
* @param image_data_type API 호출시 지정한 이미지 유형 (nImageType 파라미터)
* @param image_file_name API 호출시 지정한 파일 이름 (strFileName 파라미터)
* (전용브라우저 및 nCaptureType 파라미터가 1인 경우 유효)
* @param saved_file_path API 호출시 실제 저장된 파일 절대 경로
* (전용브라우저 및 (nCaptureType 파라미터가 1인 경우 유효)
*/
function on_imagedata_complete(image_data, image_data_name, image_data_type, image_file_name, saved_file_path)
{
var jsPDF, pdf_doc, image_prop, pdf_image_width, pdf_image_height;
// jsPDF 상수 정의
jsPDF = window.jspdf.jsPDF;
// PDF 문서 오브젝트 생성
pdf_doc = new jsPDF({
orientation: "portrait", // Orientation of the first page.
unit: "mm", // Measurement unit (base unit) to be used when coordinates are specified.
format: "a4" // The format of the first page
});
// 이미지 크기 정보를 구함
image_prop = pdf_doc.getImageProperties(image_data);
console.log("image width/height = " + image_prop.width + ", " + image_prop.height);
// PDF 문서 페이지 크기 정보
console.log("pdf page width/height = " +
pdf_doc.internal.pageSize.getWidth() + ", " + pdf_doc.internal.pageSize.getHeight());
// 이미지 너비를 페이지 크기에 맞춤 처리 예시
/*
pdf_image_width = pdf_doc.internal.pageSize.getWidth();
pdf_image_height = (image_prop.height * pdf_image_width) / image_prop.width;
// Add the image to the PDF
pdf_doc.addImage(image_data, "PNG", 0, 0, pdf_image_width, pdf_image_height);
*/
// 이미지 크기를 그대로 처리 예시 (1px = 0.2645833333 mm)
pdf_doc.addImage(image_data, "PNG", 0, 0, image_prop.width * 0.2645833333, image_prop.height * 0.2645833333);
// Save the PDF
pdf_doc.save(image_data_name + ".pdf");
}