html5签名以及保存图片

最新推荐文章于 2024-05-10 09:16:43 发布

top慢慢

最新推荐文章于 2024-05-10 09:16:43 发布

阅读量9k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/baidu_31345523/article/details/50770966

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

直接贴项目代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>授权书</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="apple-touch-fullscreen" content="NO">
<meta name="description" content="授权书">
<meta name="keywords" content="授权书">
<link href="css/mobile.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="container">
   <div class="ready_info2 clear" style="padding:3% 6%;box-sizing: border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;">
      <i></i><span>为了维护您的权益，请在签署前仔细阅读本授权书中的各项条款</span>
    </div>
    <div class="shouquan_bd">
      <p>本人知晓并同意平安普惠依据《征信业管理条例》及相关法律法规，向第三方征信机构提交本人在此笔借贷业务中产生的相关信息，包括但不限于个人基本信息、借款申请信息、借款合同信息以及还款行为信息，并记录在征信机构的个人信用信息数据库中。</p>
      <div class="text_url">
      <a href="javascript:void(0)" class="color3">《综合授权书》</a>
      <a href="javascript:void(0)" class="color3">《平安易贷险协议》</a>
      </div>
      <div class="shouquan_f">
        <div class="qian_name">
        <label>客户签名：</label><i class="qm" id="qian-input"></i>
		<img id='img' alt='' class="qmwc"/>
        </div>
        <div class="qian_nametimes">
        <label>日期：</label>
        <span>2015-12-15</span>
        </div>
      </div>
    </div>
    <div class="sq_f">
      <img src="images/sq_f.png" width="100%">
    </div>
	<!-- 签名 -->
	     <div class="qianmingPage" id='qianmingPage'>
        <canvas id="myCanvas"></canvas>
        <div class="btnWrapper">
             <button id="cancel" ><img src="images/btnCancel.png" ></button>
            <button id="clear"><img src="images/btnClear.png"></button>
            <button id="save"><img src="images/btnSure.png"></button>

        </div>
    </div>

	<!--  -->
    <div class="but_botton" id="but_botton"><input type="button" value="授权并签名" class="mybutton btn_commom_bg" id="btnNextOVR"></div>
	
</div>
<div class="bottom_remind" id="bottom_remind" ><img src="images/bottom.png" ></div>
<!-- <div class=""></div> -->
<script type="text/javascript">
    window.onload = function(){
        var oInput = document.getElementById("qian-input");
       // var btnNextOVR = document.getElementById("btnNextOVR");
        var oQian = document.getElementById("qianmingPage");
        var but_botton = document.getElementById("but_botton");
        var bottom_remind = document.getElementById("bottom_remind");
        var oQmwc = document.getElementById("img");
        var oSave=document.getElementById("save");
        var oCancel=document.getElementById("cancel");
        var oClear=document.getElementById("clear");
        but_botton.οnclick=function(){
            oQian.style.display="block";  
            oQmwc.style.display="block";  
            but_botton.style.display="none";  
            oInput.style.display="none";  
            bottom_remind.style.display="none";  
        };

        oSave.οnclick=function(){
            //base64
         var dataUrl = canvas.toDataURL();
         img.src = dataUrl;
         oQian.style.display="none"; 
		 but_botton.style.display="block";
       bottom_remind.style.display="block";
	   location.href = "holding.html";
        }

    oCancel.οnclick=function(){
        oQian.style.display="none";
        oQmwc.style.display="none";
        oInput.style.display="block";
       but_botton.style.display="block";
       bottom_remind.style.display="block";
    };

    oClear.οnclick=function(){
        board.clearRect(0,0,canvas.width,canvas.height);
    };

    // qianming
     var canvas,board,img;
     canvas = document.getElementById('myCanvas');
     img= document.getElementById('img');

     canvas.height = 400;
     canvas.width = 640;

     board = canvas.getContext('2d');

     var mousePress = false;
     var last = null;

    function beginDraw(){
        mousePress = true;
    }

    function drawing(event){
        event.preventDefault();
        if(!mousePress)return;
         var xy = pos(event);
        if(last!=null){
            board.beginPath();
            board.moveTo(last.x,last.y);
            board.lineTo(xy.x,xy.y);
            board.stroke();
        }
        last = xy;
    }

    function endDraw(event){
         mousePress = false;
        event.preventDefault();
         last = null;
    }

    function pos(event){
         var x,y;
        if(isTouch(event)){
         x = event.touches[0].pageX;
         y = event.touches[0].pageY;
        }else{
         x = event.offsetX-event.target.offsetLeft;
         y = event.offsetY-event.target.offsetTop;
        }
         console.log('x='+x+' y='+y);
         return {x:x,y:y};
    }

    function isTouch(event){
         var type = event.type;
        if(type.indexOf('touch')>=0){
         return true;
        }else{
         return false;
        }
    }
    board.lineWidth = 3;
    board.strokeStyle="#000";
    canvas.onmousedown = beginDraw;
    canvas.onmousemove = drawing;
    canvas.onmouseup = endDraw;
    canvas.addEventListener('touchstart',beginDraw,false);
    canvas.addEventListener('touchmove',drawing,false);
    canvas.addEventListener('touchend',endDraw,false);


   
};
  
</script>
</body>
</html>

.shouquan_bd{width:90%;margin:0 auto;height:auto;background:url(../images/sq.png) no-repeat;background-size:100%;padding:20% 6% 1%;box-sizing: border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;position:relative;}
.shouquan_bd p{text-indent:2em;text-align:justify;line-height:20px;}
.color3{color:#1ba5ea;}
.text_url{margin-bottom:40%;}
.text_url a{margin-top:4%;display:block;}
.shouquan_f{position:absolute;bottom:8%;right:4%;}
.qian_name{height:32px;position:relative}
.qian_nametimes label{width:70px;display:inline-block;font-size:14px;color:#303030;}
.qian_nametimes span{width:80px;display:inline-block;font-size:14px;color:#303030;}
.qian_nametimes label{text-align:right;}
.sq_f{width:90%;margin:0 auto;}
.qian_name .qm{height:32px;width:70px;display:block;position:absolute;right:0;top:-12px;}
.ready_info2 i{width:15px;height:18px;background:url(../images/icon_02.png) no-repeat left 3px;float:left;background-size:100%;margin-right:6px;}
.ready_info2 span{float:left;width:90%;margin-top:3px;font-size:12px}

top慢慢

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
html5签名以及保存图片

直接贴项目代码授权书为了维护您的权益，请在签署前仔细阅读本授权书中的各项条款本人知晓并同意平安普惠依据《征信业管理条例》及相关法律法规，向第三方征信机构提交本人在此笔借贷业务中产生的相关信息，包括但不限于个人基本信息、借款申请信息、借款合同信息以及还款行为信息，并记录在征信机构的个人信用信息数据库中。
复制链接

扫一扫