html5签名以及保存图片

最新推荐文章于 2024-06-11 00:11:31 发布
最新推荐文章于 2024-06-11 00:11:31 发布
阅读量9k 收藏 6
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_31345523/article/details/50770966
版权

直接贴项目代码

<!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
    评论
专栏目录
h5手写签名并保存为图片
cainiaohhhh的博客
10-23 1668
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-j
html5手机上签名,h5实现电子签名
weixin_39994665的博客
06-17 2006
h5实现电子签名前端需要引入：jSignature.min.js ，jquery-1.9.1.min.js前端 部分写法：body内加div id="signature"/divimg id='img' src=""Js ：$(document).ready(function() {var arguments = {width: '100%',height: '40%',color:'#000',...
利用 HTML5 Canvas 实现在线签字功能
最新发布
weixin_74268571的博客
06-11 601
HTML5 的 canvas 元素是一种强大的图形渲染工具,它可以实现各种动画效果，给大家展示的是签字功能的演示实现
h5 利用canvas手写签名并保存
热门推荐
金大光
12-05 2万+
最近公司在做一个签名的功能，主要用到了canvas画线的功能结合移动端touch事件
页面手写签名实现：利用Canvas技术将签名保存为图片
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-23 877
Canvas 是 HTML5 中新增的一个元素，它是一个画布，可以用 JavaScript 在网页上绘图。与 SVG 不同，Canvas 是基于位图的，不能直接在上面进行复杂的几何运算，而 SVG 则是基于矢量的，可以绘制复杂的几何图形。Canvas 的坐标系与 SVG 不同，它的原点在左上角，x 轴向右延伸，y 轴向下延伸。这样就可以在页面中使用canvas实现手写签名了。Canvas 是 HTML5 中新增的一个重要功能，它提供了一个在网页上绘图的方法，可以用于创建各种图形、动画和游戏等。
vue中实现手写签名并保存图片
zhh369709919的博客
07-09 2129
直接上代码 html代码： <div id="app"> <canvas id="myCanvas"></canvas> <div class="footer"> <div @click="clearArea()">清除</div> <div @click="saveImageInfo()">保存</div> <div> <input v-model="stro
html5实现手写签名板，用于电子文档签名
qq445829096的博客
09-22 5687
html5实现手写签名板，用于电子文档签名
HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能
weixin_40745445的博客
03-10 2081
简介 项目结构：html+vue+springboot html引入VUE项目vue.min.js、jQuery的jquery-3.4.1.min.js，签名：modernizr.js、jSignature.min.js、jSignature.min.noconflict.js，手机端mui.min.js，弹窗样式：mustache.js、zeroModal.js HTML <!DOCTYPE html> <html> <head> <meta charse
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
weixin_42437984的博客
06-27 1366
vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。刚好项目用到此功能，就网上找了一下，清理了无用代码，简单方便，因为项目中多个地方需要使用，所以我将它整理为组件，通过ref和传值控制，下面代码我单独整理出来，可自行封装组件(只支持移动端，不支持pc端)。代码中，css自行修改一下宽高，背景之类即可。代码如下清除签名确认签名export default {name: "si...
h5 使用canvas实现电子签名和图片的保存
dwz100916007的博客
05-08 4354
公司的业务表格登记需要使用上签名,所以做了一个电子签名的模块,网上看了很多相关资料,我选择使用jq 里面带有的签名功能,使用jq-signature.js来实现. 1.将jQuery和jq-signature.js文件 引入项目里面; jQuery不同版本下载大全 jq-signature.js下载地址 2. 设置界面 <div class="canvasDiv">...
html5 利用canvas手写签名并保存的实现方法
09-22
主要介绍了html5 利用canvas手写签名并保存的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 提交手写签名到服务器端保存
05-03
本篇文章将深入探讨如何实现HTML5手写签名功能以及如何将签名数据发送到服务器。 首先，我们需要理解HTML5中的`<canvas>`元素，它是实现手写签名的核心。`<canvas>`元素提供了一个图形绘制区域，开发者可以利用...
电脑端canvas签名保存图片.rar
07-03
在电脑端实现canvas签名并保存图片的技术涉及到HTML5、JavaScript（JS）、PHP等多种技术的结合。这个项目的主要目的是创建一个用户可以在电脑上签名，然后将签名图像保存到服务器的交互功能。以下是对这一过程的详细...
jquery+html5 手写签名横屏
11-04
5. **交互**：提供保存和清除签名的按钮，使用jQuery触发相应的操作，如将签名转换为图片并下载，或者清空画布。 6. **兼容性**：考虑不同浏览器和设备对HTML5和CSS3的支持情况，进行必要的兼容性处理。 这个签名...
html5 canvas在线签名板代码
05-18
此外，为了保存和恢复签名，可以使用`toDataURL()`方法将canvas的内容转换为data URL，这通常是一种Base64编码的图片，可以存储在服务器上，或者在需要时再加载回canvas。同时，可能还会有清除签名、调整笔触宽度、...
mobiscroll插件使用
baidu_31345523的博客
01-18 5842
最近做手机端的页面，用到mobiscroll插件，现在总结一下： http://docs.mobiscroll.com/2-13-2 可以在这里参考学习。 在之前，要先下载mobiscroll.custom-2.5.0.min.css和mobiscroll.custom-2.5.0.min.js  ，然后分别引入。再引入一个jquery库。  写一个效果，带注释： 日期选择：
在微信浏览器中做分享到朋友圈和分享到好友
baidu_31345523的博客
03-04 2898
最近一直看到有关做微信朋友圈分享的，下面我也总结一份： 如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮： 在微信内嵌浏览器定义了一个私有 JavaScript 对象：WeixinJSBridge，通过操作这个对象的相关方法可以实现分享到微信朋友圈，和判断一个微信号的关注状态以及实现关注指定微信号等功能。 分享到朋友圈 function weixinShareTime
html5可拖动的滚动条样式修改
baidu_31345523的博客
03-01 2234
关于html5中， input标签的type="range"样式的修改： 下面综合一个小例子： CSS，Jquery精美进度条和滑动条插件 /*进度条的边框颜色 高 背景颜色*/ ::-moz-range-track { border: 1px solid green; height: 20px; background: #f0f3f9; } /
用H5实现手写签名保存图片
05-16
要实现手写签名保存图片，可以使用HTML5的Canvas元素和JavaScript编写代码。 以下是一个简单的实现步骤： 1. 在HTML文件中创建一个Canvas元素，并设置它的宽度和高度。 ```html <canvas id="signature" width="400" height="200"></canvas> ``` 2. 在JavaScript文件中获取Canvas元素和它的上下文。 ```javascript var canvas = document.getElementById("signature"); var ctx = canvas.getContext("2d"); ``` 3. 添加事件监听器，以便在用户在Canvas上绘制时捕获鼠标或触摸事件。 ```javascript canvas.addEventListener("mousedown", startDrawing); canvas.addEventListener("mousemove", draw); canvas.addEventListener("mouseup", stopDrawing); canvas.addEventListener("touchstart", startDrawing); canvas.addEventListener("touchmove", draw); canvas.addEventListener("touchend", stopDrawing); ``` 4. 实现绘制函数。在mousedown或touchstart事件发生时，将Canvas上下文的起始点设置为鼠标或触摸位置。在mousemove或touchmove事件发生时，使用Canvas上下文的lineTo方法绘制直线。最后，在mouseup或touchend事件发生时，停止绘制。 ```javascript var isDrawing = false; function startDrawing(e) { isDrawing = true; ctx.beginPath(); var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; ctx.moveTo(x, y); } function draw(e) { if (!isDrawing) return; var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; ctx.lineTo(x, y); ctx.stroke(); } function stopDrawing() { isDrawing = false; } ``` 5. 添加保存功能。将Canvas元素转换为图片并将其保存到本地。 ```javascript function saveImage() { var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); var link = document.createElement("a"); link.download = "signature.png"; link.href = image; link.click(); } ``` 最后，在HTML文件中添加一个保存按钮，并在JavaScript文件中添加事件监听器。 ```html <button onclick="saveImage()">保存签名</button> ``` 这样就可以实现手写签名保存图片的功能了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值