jsPDF 라이브러이 이미지 처리 가이드

템플릿 위치: /HTML5/OSS/jspdf_image

템플릿 파일

• jspdf_image.xml
• jspdf_image.js
• 새창으로 실행

// "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");
}