C#结合JavaScript实现手写板签名效果.docx

第

C#结合JavaScript实现手写板签名效果

mousePressed=true;

Draw(event.pageX-this.offsetLeft,event.pageY-this.offsetTop,false);

c.onmousemove=function(event){

if(mousePressed){

Draw(event.pageX-this.offsetLeft,event.pageY-this.offsetTop,true);

c.onmouseup=function(event){

mousePressed=false;

functionDraw(x,y,isDown){

if(isDown){

ctx.beginPath();

ctx.strokeStyle=selected2;

ctx.lineWidth=selected1;

ctx.lineJoin=round;

ctx.moveTo(lastX,lastY);

ctx.lineTo(x,y);

ctx.closePath();

ctx.stroke();

lastX=x;lastY=y;

functionclearArea(){

ctx.setTransform(1,0,0,1,0,0);

ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

//清除签名图片

if(saveimgs.getElementsByTagName(span).length=1){

varclearImg=saveimgs.getElementsByTagName(span)[0];

saveimgs.removeChild(clearImg);

/script

/html

该页面需要引用jquery-3.3.1.min.js

前端引用

前端页面除嵌入手写功能页面外，iframe的父窗口需要放置两个元素，一个用于存储手写提交后的Base64数据的Asp.net服务器按钮文本框元素，另一个是用于模拟调用服务器事件的Asp.net服务器按钮元素。

引用代码如下：

div

iframewidth=520height=350id=hwrunat=serverscrolling=noframeborder=0src=/cc/module/hw/hw.aspx/iframe

asp:TextBoxID=pbase64TextMode=MultiLinerunat=server/asp:TextBox

asp:buttonID=phwOnClientClick=waittip()text=后台处理runat=server/

/div

后端处理

手写功能中的提交执行代码将调用如下：

window.parent.document.getElementById(pbase64).value=image;

window.parent.document.getElementById(phw).click();

其中pbase64和phw控件为服务器控件，可直接模拟调用phw按钮的服务器click，在这之前其还可以自动处理OnClientClick事件以显示等待界面。请注意waittip()执行了一段javascript脚本，如下：

functionwaittip(){

layer.open({type:2,shadeClose:false,content:正在分析,请稍候...});

这其中引入了Layer弹出层技术，关于Layer弹层组件请参照我的文章《改造layer弹层移动版组件》

这是调用服务器Click的事件处理代码，将上传的Base64图片转为两种格式的图片文件（PNG和JPEG）。代码如下：

protectedvoidphw_Click(objectsender,EventArgse)

stringmtfilename=d:\\hw_+System.Guid.NewGuid().ToString()+.png;

stringmtfilename2=d:\\hw_+S