<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#canvans{
width: 100%;
height: 100%;
position: relative;
}
#canvas canvas{
display: block;
}
button{
width: 50%;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #DEDEDE;
z-index: 1;
}
#clear{
position: absolute;
bottom: 0;
left: 0;
}
#sure{
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="canvans">
<button id="clear">清空</button>
<button id="sure">确定</button>
<canvas width="414" height="896"></canvas></div>
<script>
window.onload = function(){
new drawImage({
el:document.getElementById('canvans'), //绘制canvas的父级div
clearClick:document.getElementById('clear'), //清除按钮
saveClick:document.getElementById('sure') //保存按钮
})
}
//绘制签名
function drawImage(obj){
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for(let i in obj){
this[i]=obj[i]
}
this.canvans = document.createElement('canvas')
this.el.appendChild(this.canvans)
this.ctx=this.canvans.getContext('2d') //创建画布
this.canvans.width=this.el.clientWidth //画布宽度
this.canvans.height=this.el.clientHeight
this.ctx.fillStyle=this.background //画布背景色填充
this.ctx.fillRect(0,0,this.canvans.width,this.canvans.height) //绘制被填充的矩形
this.ctx.strokeStyle=this.color //画笔颜色
this.ctx.lineWidth=this.lineHeight //线条宽度
this.ctx.lineCap = 'round' //设置或返回结束端点样式
//base64转blob
let base64Img2Blob=function(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
console.log(new Blob([uInt8Array], {type: contentType}));
return new Blob([uInt8Array], {type: contentType});
}
//pc监听
this.canvans.addEventListener('mousedown',function(e){
//起始一条路径
this.ctx.beginPath()
//把路径移动到画布指定点，不创建线条
this.ctx.moveTo(e.pageX,e.pageY)
this.mouseShow=true
}.bind(this),false)
this.canvans.addEventListener('mousemove',function(e){
e.preventDefault();
if (!this.mouseShow) return
// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
this.ctx.lineTo(e.pageX,e.pageY)
// 绘制已定义的路径
this.ctx.stroke()
}.bind(this),false)
this.canvans.addEventListener('mouseup',function(e){
//创建从当前点回到起始点的路径
this.ctx.closePath()
this.mouseShow=false
}.bind(this),false)
//移动监听
//开始绘制
this.canvans.addEventListener('touchstart',function(e){
//起始一条路径
this.ctx.beginPath()
//把路径移动到画布指定点，不创建线条
this.ctx.moveTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)
}.bind(this),false)
//绘制中
this.canvans.addEventListener('touchmove',function(e){
// 添加一个新点，然后在画布中创建从该点到最后指定点的线条
this.ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)
// 绘制已定义的路径
this.ctx.stroke()
}.bind(this),false)
//结束绘制
this.canvans.addEventListener('touchend',function(e){
//创建从当前点回到起始点的路径
this.ctx.closePath()
}.bind(this),false)
//清除画布
this.clearClick.addEventListener('click',function(){
this.ctx.clearRect(0,0,this.canvans.width,this.canvans.height)
}.bind(this),false)
//保存图片，直接转base64
this.saveClick.addEventListener('click',function(){
var dataImg = this.canvans.toDataURL('image/png')
var a = document.createElement('a')
//转blob下载
var blob= base64Img2Blob(dataImg)
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
a.download ='签名' // 设定下载名称
a.href= URL.createObjectURL(blob);
a.dispatchEvent(evt);
a.click()
//base64下载
// a.href = dataImg // 将画布内的信息导出为png图片数据
// a.download ='签名' // 设定下载名称
// a.click() //
}.bind(this),false)
}
</script>
</body></html>
效果如下：
更多信息请关注公众号：
