H5前端实现签名，写⼊到合同照⽚⾥。（前端实现俩张图⽚
合成）
⼀、概要：
我实现的需求类似于，现实中的合同签名。这种⽅式是通过前端⽣成⼀个画布，然后⽤户通过进⼊，浏览到H5页⾯，写⼊⾃⼰的名
字，在把写好的画布与我们预先准备好的合同图⽚合成⼀张图⽚，在上传⾄服务器。这种⽅式也可以后端进⾏合成，随后发现前端合成⽐较
⽅便，就在前端做了。
⼆、前端代码
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal
able=0;" />
<html>
<head>
<title>测试页⾯</title>
</head>
<style>
.div-top {text-align: center;height: 4rem;line-height: 4rem;overflow: hidden;width: 100%;background: url(img/background.gif) repeat-x 0;}
.div-topSpan {font-size: 1.5rem;color: #FFFFFF;}
.canvas {display: block;border: 1px solid #95b4e3;}
#clear,
#clear1,
#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 50px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radi </style>
<script src="js/jquery.js"></script>
<body>
<div class="agree" >
<div class="div-top" >
<span class="div-topSpan">阅读协议</span>
</div>
<div align="center">
<img id="starImg" src="img/tp.jpg" />
</div>
<img id="image" src="" />
<div align="center" >
<canvas id="main" width="375" height="2564" ></canvas>
</div>
<div>
<div align="center">
<span >请签署您的姓名：</span>
<canvas id="canvas" class="canvas" width="600" height="600">
您的浏览器不⽀持canvas技术，请升级浏览器!jquery在线图片
</canvas>
</div>
<div >
<span id="clear">清空</span>
<span id="save">保存</span>
</div>
</div>
</div>
<script>
/**
*合成画布内容
*/
function hechen(){
var mydate = new Date();
/
/var date = FullYear()+'-'+(Month()+1)+'-'+Date();
var mainCtx = getCanvasContext('main');
var maxWidth = mainCtx.width;
var maxHeight = mainCtx.height;
var maxHeight = mainCtx.height;
mainCtx.clearRect(0,0,maxWidth,maxHeight);
//因为没法直接读取本地图⽚所以做了这部操作
var starImg = new Image();
var centImg = new Image();
var endImg = new Image();
starImg.src=$('#starImg').attr('src');
centImg.src=$('#image').attr('src');
endImg.src=$('#image').attr('src');
mainCtx.drawImage(endImg,130,2440,52,28);
};
mainCtx.currentTime=1;
mainCtx.drawImage(centImg,90,64,52,28);
};
//先把图⽚绘制在这⾥
mainCtx.drawImage(starImg,0,0,375,2564);
//mainCtx.drawImage(starImg,0,0,200,2400);
//⽇期
mainCtx.font = "small-caps bold 15px STXinwei";
//设置⽤户⽂本填充颜⾊
mainCtx.fillStyle = "black";
mainCtx.fillText('16256458753',108,2515);
mainCtx.font = "small-caps bold 8px STXinwei";
mainCtx.FullYear(),70,2544);
mainCtx.fillText((Month()+1),100,2544);
mainCtx.Date(),122,2544);
/
/mainCtx.fillText('2019',279,2544);
//mainCtx.fillText('12',308,2544);
//mainCtx.fillText('13',330,2544);
//读取⽤户的⽂本
/*if($('#desc').val()){
mainCtx.font = "small-caps bold 18px STXinwei";                //设置⽤户⽂本填充颜⾊
mainCtx.fillStyle = "black";
//从坐标点(50,50)开始绘制⽂字
mainCtx.fillText($('#desc').val(),108,335);
//设置时间填充颜⾊
mainCtx.font = "small-caps bold 16px STXinwei";                mainCtx.fillText(date,326,447);
}*/
};
}
/**
*获取画布对象
*/
function getCanvasContext(id){
ElementById(id).getContext("2d");    }
/**
*⽅法调⽤
*/
function saveImageInfo() {
hechen();
//...⽐如取出合成的图⽚
setTimeout(function(){
createImg();
},1000);
}
/**
/**
*⽣成图⽚
*/
function createImg(){
var image = new Image();
var canvas = ElementById("main");
image.src = DataURL("image/png");
console.log('图⽚内容===>', image.src);
}
</script>
<script type="text/javascript" src="js/autograph.js"></script>
</body>
实例图⽚
三、注意
1.测试的时候⽤服务器测试，⼀个tomcat就可以了。不⽤服务器，图⽚⽆法出来，这是因为俩张图⽚存在浏览器的跨域问题。
2.提供⼀个测试demo的下载地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。