CANVAS实现签名生成图片

<template>
<div>
<canvas class="canvasSign" id="canvasSign" @touchstart="touchStart($event)"
@touchend="touchEnd($event)" @touchmove="touchMove($event)">您的浏览器不支持canvas</canvas>
<div class="signDoBtn">
<div class="op_btn" @click="proDraw">确定</div>
<div class="op_btn" @click="clearDraw">清除</div>
<div class="op_btn" @click="cancelDraw">取消</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
canvasWidth: 0,
strokeColor: 'black', /* 填充颜色 */
LastLoc: {x: 0, y: 0}, /* 记录最后的移动坐标 */
LastTime: 0,
LastLineWidth: 5, /* 记录线宽 */
canvasHeight: 0,
isMouseDown: false, /* 是否按下鼠标 */
targetEle: null, /* canvas元素 */
context: null,
maxLineWidth: 20, /* 最大线宽 */
minLineWidth: 1, /* 最小线宽 */
maxStrokeV: 10,
minStrokeV: 0.1,
touch: {x: 0, y: 0}
}
},
methods: {
optimizedMove () {},
cancelDraw () {
this.$emit('getimg');
},
clearDraw () { /* 清空已经绘制的图形 */
this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
this.clearDrawDone();
},
proDraw () { /* 返回base64编码 */
let a = this.targetEle.toDataURL('image/png');
this.$emit('getimg', a);
},
clearDrawDone () { /* 清除图形的方法 */
this.context.save();
this.context.restore();
},
begainStroke (point) { /* 开始绘制 */
this.isMouseDown = true;
let p = this.getPointFun(this.touch.x, this.touch.y);
this.LastLoc.x = p.x;
this.LastLoc.y = p.y;
this.LastTime = new Date().getTime(); // 返回当前时间戳
},
tabMouseDown () { /* 根据是否触摸改变状态 */
this.isMouseDown = false;
},
moveStroke (point) {
let curLoc = this.getPointFun(point.x, point.y); // 得到当前鼠标点击的坐标
let curTime = new Date().getTime();
// draw
this.context.beginPath();
this.context.moveTo(this.LastLoc.x, this.LastLoc.y);
this.context.lineTo(curLoc.x, curLoc.y);
this.context.lineWidth = this.LastLineWidth;
this.context.lineCap = 'round';
this.context.lineJoin = 'round';
this.context.strokeStyle = this.strokeColor;
this.context.closePath();
this.context.stroke();
this.LastLoc.x = curLoc.x;
this.LastLoc.y = curLoc.y;
this.LastTime = curTime;
},
setTouch (o) {
this.touch.x = o.clientX;
this.touch.y = o.clientY;
},
touchStart (e) {
e.preventDefault();
this.setTouch(e.touches[0]); // 防止多点触控，以第0个触控为准
this.begainStroke();
},
touchMove (e) {
e.preventDefault();
if (this.isMouseDown) {
this.setTouch(e.touches[0]); // 防止多点触控，以第0个触控为准
this.optimizedMove({x: this.touch.x, y: this.touch.y});
}
},
touchEnd (e) {
e.preventDefault();
this.tabMouseDown();
},
getPointFun (x, y) { /* 计算坐标 */
let bbox = this.targetEle.getBoundingClientRect(); // 拿到canvas的包围盒
let a = (Number(x) - Number(bbox.left)) + 0.5;
let b = (Number(y) - Number(bbox.top)) + 0.5;
return {x: a, y: b};
}
},
created: function () {
let _this = this;
this.$nextTick(function () {
_this.canvasWidth = Math.min(700, window.innerWidth);
_this.canvasHeight = _this.canvasWidth;
_this.targetEle = document.getElementById('canvasSign');
_this.context = _this.targetEle.getContext('2d');
_this.targetEle.width = _this.canvasWidth;
_this.targetEle.height = _this.canvasHeight;
let requestAnimationFrame = window.requestAnimationFrame; /* 如果支持 requestAnimationFrame 则使用该方法 */
_this.optimizedMove = requestAnimationFrame ? function (point) {
requestAnimationFrame(function () {
_this.moveStroke(point);
});
} : _this.moveStroke;
});
}
}
</script>
<style lang="scss">
.canvasSign{
display:block;
margin:0 auto;
width: 100%;
background-color: #f4f4f4;
}
.signDoBtn{text-align:center;}
.signDoBtn div{
display: inline-block;
margin:10px 0 0 10px;
border:1px solid #aaa;
width:60px;
height: 30px;
line-height: 30px;
font-size:16px;
border-radius: 5px 5px;
cursor:pointer;
background:#fff;
font-weight: normal;
background-color: #f2f2f2;
}
</style>