후원회원 가입 받을 때 서명(싸인, 사인) 받는 법 2 - 복수의 패드 및 해당 확장변수가 필수/선택일 경우를 모두 고려함

.

댓글 서명은 힘들거 같아 본문 내에 서명을 만들려고 하는데요.

문서를 클릭해서 보고 바로 확인자 서명을 하려고 하는데요. 

본문에서 바로 확인자 서명을 하면 문서 보기(read)에 서명 바로 밑에 또 확인자 서명이 생기게 하려구요.

기초지식이 없어서 잘 안되네요. 텍스트는 되는데 서명 이미지는 안되네요.
아래 스크립트 내용 적으니 수정 좀 부탁드려도 될까요??

_read.html 파일입니다. (확장변수는 sign으로 했습니다. 서명자와 확인자 구분을 위해) 

<!--//본문내 서명 추가-->
<block cond="$logged_info->member_srl==$oDocument->get('member_srl')||$grant->manager">
<block cond="$click">
{@
$oDB = &DB::getInstance();
$sql = $oDB->_query('SELECT COUNT(*) as count FROM xe_document_extra_vars WHERE document_srl='.$document_srl.' and module_srl ='.$module_info->module_srl.' and eid="sign"');
$rec_count = $oDB->_fetch($sql);
}
<!--@if($rec_count->count==0)-->
{@
$query = $oDB->_query('INSERT INTO xe_document_extra_vars (module_srl, document_srl,var_idx,lang_code,value,eid) VALUES ('.$module_info->module_srl.','.$document_srl.',4,"ko","'.$click.'","sign")');
}
<!--@else-->
{@
$query = $oDB->_query('update xe_document_extra_vars set value = "'.$click.'" where document_srl = '.$document_srl.' and module_srl = '.$module_info->module_srl.' and eid = "sign"');
}

<!--@end-->
<script>location.href="{str_replace('amp;', '', getUrl('click', ''))}"</script>
</block>
<!--// 서명 받기 -->
<cond="strpos($eids,'signature')!==false">
<load target="css/jquery.signaturepad.css" />
<load target="js/numeric-1.2.6.min.js" />
<load target="js/bezier.js" />
<load target="js/jquery.signaturepad.js" />
<load target="js/json2.min.js" />
{@ $i=1; }
<div class="sigPad" style="width:296px; display:table; margin:0 auto;" loop="$extra_keys=>$key,$val" cond="substr($val->eid,0,9)=='sign'">
<ul class="sigNav">
<h3>{$val->name}<em cond="$val->is_required=='Y'">*</em></h3>
<li class="clearButton"><a href="#clear">{$lang->reload}</a></li>
</ul>
<div class="sig sigWrapper" style="height:100px;">
<div class="typed"></div>
<canvas class="pad" id="cy-sig{$i}" width="294" height="100"></canvas>
<input type="hidden" name="extra_vars{$key}" id="cy-sig_data{$i}" class="output<!--@if($val->is_required=='Y')--> cy-req<!--@end-->" value="{$oDocument->getExtraEidValue($val->eid)}">
</div>
<p style="margin-top:5px;text-align:center;font-size:11px;">{$val->desc}</p>
{@ $i++ ;}
</div>
<script>
// 서명 옵션 설정
jQuery(document).ready(function(){
jQuery('.sigPad').signaturePad({
drawOnly:true,
drawBezierCurves:true,
lineTop:90
});
});
// 서명 패드 갯수(=n-1) 자동 설정
var n = '{$i}';
// 서명 관련 변수 정의
for(var i=1;i<n;i++) {
eval('canvas'+i+'=document.getElementById("cy-sig'+i+'")'),
eval('context'+i+'=canvas'+i+'.getContext("2d")'),
eval('cv_data'+i+'=document.getElementById("cy-sig_data'+i+'")'),
eval('req'+i+'=cv_data'+i+'.className.split(" ")[1]'),
eval('val'+i+'=cv_data'+i+'.value');
}
// 서명 이미지값 문자열 전달 처리
function dataURL(){
for(var i=1;i<n;i++) {
if(eval('cv_data'+i).value != ''){
eval('cv_data'+i).value = eval('canvas'+i).toDataURL();
} else {
if(eval('req'+i) == 'cy-req') {
return false;
} else eval('cv_data'+i).value = '';
}
}
}
// 수정시 서명 문자열의 이미지 로드
if(window.addEventListener) {
for(var i=1;i<n;i++) {
if(eval('val'+i) != '') window.addEventListener('load', cnvs2Img, false);
}
function cnvs2Img(){
for(var i=1;i<n;i++) {
eval('image'+i+' = new Image()');
eval('image'+i).src = eval('val'+i);
eval('image'+i).onload = function(){
for(var i=1;i<n;i++) {
eval('context'+i).drawImage(eval('image'+i),0,0);
if(eval('val'+i) != '') {
eval('cv_data'+i).value = eval('canvas'+i).toDataURL();
} else {
eval('cv_data'+i).value = '';
}
}
}
}
}
}
</script>
<div><p align="right">
<input type='image' src="/img/footprint.png" onClick="location.href='{getUrl('click',$val->getValueHTML())}'" />

</div></p>
</block>