게시판에 서명 질문입니다. 채택완료

</p>

<p><div class="form-group">

    <label class="col-sm-2 control-label" for="wr_1">서명<strong class="sound_only">필수</strong></label>

    <div class="col-sm-10">

        <?php if($write['wr_1']) { ?>

        


        <img src="<?php echo $write['wr_1'] ?>">

        <?php } ?>

        <input type="hidden" name="wr_1" value="<?php echo $write['wr_1'] ?>" class="form-control input-sm">

        <div id="wr_1"></div>

        <div data-role="page">

            <!-- <div id="page" data-role="content"></div> -->


            <div data-role="popup" id="divPopUpSignContract">

                <div class="ui-content popUpHeight">

                    <div id="div_signcontract">

                        <canvas id="canvas">Canvas is not supported</canvas>

                        <div>

                            <input id="btnSubmitSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="b" value="서명확인" onclick="fun_submit()" />

                            <input id="btnClearSign" class="btn btn-orangered btn-xs" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" />

                            <label id="page" data-role="content"></label>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div></p>

<p>

<script type="text/javascript">

var isSign = false;

var leftMButtonDown = false;</p>

<p>jQuery(function() {

    //Initialize sign pad

    init_Sign_Canvas();

});</p>

<p>function fun_submit() {

    if (isSign) {

        var canvas = $("#canvas").get(0);

        var imgData = canvas.toDataURL();

        jQuery('#page').find('p').remove();

        jQuery('#page').find('img').remove();

        jQuery('#page').append(jQuery('<p>위의 서명날인을 사용합니다.</p>'));

        jQuery('#wr_1').append($('<input type="hidden" name="wr_1" class="form-control input-sm">').attr('value', imgData));</p>

<p>        closePopUp();

    } else {

        alert('Please sign');

    }

}</p>

<p>function closePopUp() {

    jQuery('#divPopUpSignContract').popup('close');

    jQuery('#divPopUpSignContract').popup('close');

}</p>

<p>function init_Sign_Canvas() {

    isSign = false;

    leftMButtonDown = false;</p>

<p>    //Set Canvas width

    var sizedWindowWidth = $(window).width();

    if (sizedWindowWidth > 700)

        sizedWindowWidth = $(window).width() / 2;

    else if (sizedWindowWidth > 400)

        sizedWindowWidth = sizedWindowWidth - 100;

    else

        sizedWindowWidth = sizedWindowWidth - 50;</p>

<p>    //$("#canvas").width(sizedWindowWidth);

    $("#canvas").width(283);

    $("#canvas").height(80);

    $("#canvas").css("border", "1px solid #add8e6");</p>

<p>    var canvas = $("#canvas").get(0);</p>

<p>    canvasContext = canvas.getContext('2d');</p>

<p>    if (canvasContext) {

        //canvasContext.canvas.width  = sizedWindowWidth;

        canvasContext.canvas.width = 283;

        canvasContext.canvas.height = 80;</p>

<p>        canvasContext.fillStyle = "#e3f0f5";

        canvasContext.fillRect(0, 0, sizedWindowWidth, 200);</p>

<p>        canvasContext.moveTo(50, 150);

        canvasContext.lineTo(sizedWindowWidth - 50, 150);

        canvasContext.stroke();</p>

<p>        canvasContext.fillStyle = "#000";

        canvasContext.font = "20px Arial";

        canvasContext.fillText("x", 40, 155);

    }

    // Bind Mouse events

    $(canvas).on('mousedown', function(e) {

        if (e.which === 1) {

            leftMButtonDown = true;

            canvasContext.fillStyle = "#000";

            var x = e.pageX - $(e.target).offset().left;

            var y = e.pageY - $(e.target).offset().top;

            canvasContext.moveTo(x, y);

        }

        e.preventDefault();

        return false;

    });</p>

<p>    $(canvas).on('mouseup', function(e) {

        if (leftMButtonDown && e.which === 1) {

            leftMButtonDown = false;

            isSign = true;

        }

        e.preventDefault();

        return false;

    });</p>

<p>    // draw a line from the last point to this one

    $(canvas).on('mousemove', function(e) {

        if (leftMButtonDown == true) {

            canvasContext.fillStyle = "#000";

            var x = e.pageX - $(e.target).offset().left;

            var y = e.pageY - $(e.target).offset().top;

            canvasContext.lineTo(x, y);

            canvasContext.stroke();

        }

        e.preventDefault();

        return false;

    });</p>

<p>    //bind touch events

    $(canvas).on('touchstart', function(e) {

        leftMButtonDown = true;

        canvasContext.fillStyle = "#000";

        var t = e.originalEvent.touches[0];

        var x = t.pageX - $(e.target).offset().left;

        var y = t.pageY - $(e.target).offset().top;

        canvasContext.moveTo(x, y);</p>

<p>        e.preventDefault();

        return false;

    });</p>

<p>    $(canvas).on('touchmove', function(e) {

        canvasContext.fillStyle = "#000";

        var t = e.originalEvent.touches[0];

        var x = t.pageX - $(e.target).offset().left;

        var y = t.pageY - $(e.target).offset().top;

        canvasContext.lineTo(x, y);

        canvasContext.stroke();</p>

<p>        e.preventDefault();

        return false;

    });</p>

<p>    $(canvas).on('touchend', function(e) {

        if (leftMButtonDown) {

            leftMButtonDown = false;

            isSign = true;

        }</p>

<p>    });

}

</script></p>

<p>